Spotify api add item playback queue 502 error occurred

In order to implement the function of wanting to play the next song immediately after the end of playback of the track, I was trying to use 'add Item to playback queue' of spotify api.

// WebPlayback.tsx
import { useEffect, useState } from 'react';
import Player from './pages/Player';
import { PlayerContext } from './PlayerContext';
import getTokens from './utils/functions/getTokens';

export interface IPlayerContext {
  player: Spotify.Player | null;
  deviceId: string;
}

function WebPlayback() {
  const [player, setPlayer] = useState<Spotify.Player | null>(null);
  const [deviceId, setDeviceId] = useState('');
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://sdk.scdn.co/spotify-player.js';
    script.async = true;

    document.body.appendChild(script);

    window.onSpotifyWebPlaybackSDKReady = () => {
      const player = new window.Spotify.Player({
        name: 'Mucketlist Player SDK',
        getOAuthToken: (cb) => {
          cb(getTokens());
        },
        volume: 0.5,
      });

      setPlayer(player);

      player.addListener('ready', ({ device_id }) => {
        console.log('Ready with Device ID', device_id);
        setDeviceId(device_id);
      });

      player.addListener('not_ready', ({ device_id }) => {
        console.log('Device ID has gone offline', device_id);
      });

      player.connect();
    };
  }, []);
  return (
    <PlayerContext.Provider value={{ player, deviceId }}>
      <Player />
    </PlayerContext.Provider>
  );
}

export default WebPlayback;

// Player.tsx
function Player({ tracks }: PlayerState) {
  const playerState = useContext(PlayerContext);

  useEffect(() => {
    if (!playerState.deviceId) return;
    if (!(Array.isArray(tracks) && tracks.length === 0)) {
      addItemPlaybackQueue();
    }
  }, [playerState.deviceId]);
  const addItemPlaybackQueue = async () => {
    const newQueue = 'spotify:track:4DmBVImaIhE3RyNvbtZTTz';
    const response = await axios.post(
      `https://api.spotify.com/v1/me/player/queue?uri=${newQueue}&device_id=${playerState.deviceId}`,
      {},
      {
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${getTokens()}`,
        },
      }
    );
    console.log(response);
  };
  return (
    <PlayerWrap>
      <button onClick={isPlay ? onPause : onPlay}>
        {isPlay ? 'pause' : 'play'}
      </button>
      <div>
        {!isShowVolumeMixer ? null : (
          <input
            type="range"
            min="0"
            max="1"
            step="0.1"
            value={currentVolume}
            onChange={handleVolume}
          />
        )}
        <VolumeButton
          onClick={() => setIsShowVolumeMixer((prevState) => !prevState)}
        >
          Volume
        </VolumeButton>
      </div>
      <button onClick={onPreviousTrack}>previousTrack</button>
      <button onClick={onNextTrack}>nextTrack</button>
      <button onClick={getState}>getState</button>
    </PlayerWrap>
  );
}

const mapStateToProps = (state: PlayerState) => {
  return {
    tracks: state.tracks,
  };
};

export default connect(mapStateToProps)(Player);

However, I get the following error:

POST https://api.spotify.com/v1/me/player/queue?uri=spotify:track:4DmBVImaIhE3RyNvbtZTTz&device_id=94867997ce023ed6effe8662c5ca6236ab30963a 502
Uncaught (in promise) AxiosError {message: 'Request failed with status code 502', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}

I checked that the given query (uri, device_id) was correctly entered and the accessToken was also added to the header, but an error occurs. It is frustrating because there is no related content in the spotify api official documentation or community.

Is there any way to solve the problem? Or is there another way to put the track in the play queue?