Can not save the save playlist

hellow…i just finish the project of making spotify api…but i can not save playlist though there is no error
here is my spotify.js

const clientId = "xxxxxxxxxxxxxxxxxxxxxx";
const redirectURI = "http://localhost:3000/";
let accessToken;

const Spotify = {
  getAccessToken() {
    if (accessToken) {
      return accessToken;
    }
    const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
    const expiresInMatch = window.location.href.match(/expires_in=([^&]*)/);
    if (accessTokenMatch && expiresInMatch) {
      accessToken = accessTokenMatch[1];
      const expiresIn = Number(expiresInMatch[1]);
      window.setTimeout(() => (accessToken = ""), expiresIn * 1000);
      window.history.pushState("Access Token", null, "/");
      return accessToken;
    } else {
      const accessUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectURI}`;
      window.location = accessUrl;
    }
  },

  search(term) {
    const accessToken = Spotify.getAccessToken();
    return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
    })
      .then((response) => {
        return response.json();
      })
      .then((jsonResponse) => {
        if (!jsonResponse.tracks) {
          return [];
        }

        return jsonResponse.tracks.items.map((track) => ({
          id: track.id,
          name: track.name,
          artist: track.artists[0].name,
          album: track.album.name,
          uri: track.uri,
        }));
      });
  },

  savePlaylist(name, trackUris) {
    if (!name || !trackUris.length) {
      return;
    }
    const accessToken = Spotify.getAccessToken();
    const headers = { Authorization: `Bearer ${accessToken}` };
    let userId;
    return fetch("https://api.spotify.com/v1/me", { headers: headers })
      .then((response) => response.json())
      .then((jsonResponse) => {
        userId = jsonResponse.id;
        return fetch(`https://api.spotify.com/v1/users/${userId}/playlists`, {
          headers: headers,
          method: "post",
          body: JSON.stringify({ name: name }),
        })
          .then((response) => response.json())
          .then((jsonResponse) => {
            const playlistId = jsonResponse.id;
            return fetch(
              `https://api.spotify.com/v1/users/${userId}/playlists/${playlistId}/tracks`,
              {
                headers: headers,
                method: "post",
                body: JSON.stringify({ uris: trackUris }),
              }
            );
          });
      });
  },
};

export default Spotify;

App.js

import React from "react";
//import logo from "./logo.svg";

import "./App.css";
import Playlist from "../Playlist/Playlist";
import SearchBar from "../SearchBar/SearchBar";
import SearchResult from "../SearchResult/SearchResult";
import Spotify from "../../uitl/Spotify";
//import { render } from "@testing-library/react";
class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      searchResult: [],
      PlaylistName: "New Playlist",
      PlaylistTracks: [],
    };
    this.search = this.search.bind(this);
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
    this.updatePlaylistName = this.updatePlaylistName.bind(this);
    this.savePlaylist = this.savePlaylist.bind(this);
    this.removeTrackSearch = this.removeTrackSearch.bind(this);
    this.doThese = this.doThese.bind(this);
  }
  search = (term) => {
    Spotify.search(term).then((SearchResult) => {
      this.setState({ searchResult: SearchResult });
    });
  };
  addTrack(track) {
    let tracks = this.state.PlaylistTracks;
    if (tracks.find((savedTrack) => savedTrack.id === track.id)) {
      return;
    }
    tracks.push(track);
    this.setState({ PlaylistTracks: tracks });
  }
  removeTrack(track) {
    let tracks = this.state.PlaylistTracks;
    let trackSearch = this.state.SearchResult;
    tracks = tracks.filter((currentTrack) => currentTrack.id !== track.id);
    trackSearch.unshift(track);
    this.setState({ PlaylistTracks: tracks });
  }
  removeTrackSearch(track) {
    let tracks = this.state.SearchResult;
    tracks = tracks.filter((currentTrack) => currentTrack.id !== track.id);
    this.setState({ SearchResult: tracks });
  }
  doThese(track) {
    this.addTrack(track);
    this.removeTrackSearch(track);
  }
  updatePlaylistName(name) {
    this.setState({ updatePlaylistName: name });
  }
  savePlaylist() {
    const trackUris = this.state.PlaylistTracks.map((track) => track.uri);
    Spotify.savePlaylist(this.state.PlaylistName, trackUris).then(() => {
      this.setState({
        updatePlaylistName: "New Playlist",
        PlaylistTracks: [],
      });
    });
  }

  render() {
    return (
      <div>
        <h1>
          <a href="http://localhost:3000">MusicWorld</a>
        </h1>
        <div className="App">
          <SearchBar onSearch={this.search} />
          <div className="App-playlist">
            <SearchResult
              searchResult={this.state.searchResult}
              onAdd={this.addTrack}
            />
            <Playlist
              playlistTracks={this.state.playlistTracks}
              onNameChange={this.updatePlaylistName}
              onRemove={this.removeTrack}
              onSave={this.savePlaylist}
            />
          </div>
        </div>
      </div>
    );
  }
}

export default App;