Issue with Jamming Project

Projects
1

I am getting the error Uncaught (in promise) TypeError: Converting circular structure to JSON when I try to run my code. I have looked up the error code and all the answers are about a circular reference. However, I do not understand where my code contains a circular reference

I have a function as part of my React app which saves a playlist. The function takes two arguments -playlistName (a string) and trackURIs (an array of strings). Here is the function in question

async savePlaylist(playlistName, trackURIs) {
    //checks if playlistName and trackURIs are already set (i.e. we already 'ran' the function)
    if (!(playlistName && trackURIs)) return;
    
    //setup for GET request that gets userID
    let currentAccessToken = accessToken;
    let headers = { Authorization: `Bearer ${currentAccessToken}` };
    let userID = await fetch("https://api.spotify.com/v1/me", {
      headers: headers,
    })
      .then((response) => response.json())
      .then((jsonResponse) => jsonResponse.id)
      .catch((error) => {
        console.log(`User is Fetch error: ${error}`);
      });

    //POST request to create playlist
    let playlistID = await fetch(
      `https://api.spotify.com/v1/users/${userID}/playlists`,
      {
        method: "POST",
        headers: {
          Authorization: `Bearer ${currentAccessToken}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: playlistName
        }),
        json: true,
      }
    )
      .then((response) => response.json())
      .then((jsonResponse) => jsonResponse.id)
      .catch((error) => {
        console.log(`Playlist creation error: ${error}`);
      });

    await fetch(`https://api.spotify.com/v1/playlists/${playlistID}/tracks`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${currentAccessToken}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        uris: trackURIs,
      }),
    })
      .then((response) =>
        console.log(`Songs added to the playlist: ${response}`)
      )
      .catch((error) =>
        console.log(`Error adding songs to playlist: ${error}`)
      );
  }

The part of the function that seems to be giving me issues (based on console error) is this:

let playlistID = await fetch(
      `https://api.spotify.com/v1/users/${userID}/playlists`,
      {
        method: "POST",
        headers: {
          Authorization: `Bearer ${currentAccessToken}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: playlistName
        }),
        json: true,
      }
    )
      .then((response) => response.json())
      .then((jsonResponse) => jsonResponse.id)
      .catch((error) => {
        console.log(`Playlist creation error: ${error}`);
      });

The exact line that my error points me to is this

 body: JSON.stringify({
          name: playlistName
        })

So it seems like something about referencing the argument playlistName in the JSON.stringify method is causing an issue - but I don’t quite know why its an issue. I have done some reading on circular references, but I don’t see how it applies in my case.

Here is where the function is called in my App.js file:

savePlaylist() {
    console.log('Saving playlist')
    let trackURIs = this.state.playlistTracks.map((track) => track.URI)
    Spotify.savePlaylist(this.state.playlistName, trackURIs)
    //this.setState({playlistName: "",  playlistTracks: []})
  }