PUT https://api.spotify.com/v1/me/player/play 403 (Forbidden) and POST https://api.spotify.com/v1/me

[Ea123]

This is my PlayerControls.jsx and I can't get next, previous songs or play/resume current-playing song:

import React from "react";
import styled from "styled-components";
import {
  BsFillPlayCircleFill,BsFillPauseCircleFill,BsShuffle,
} from "react-icons/bs";
import { CgPlayTrackNext, CgPlayTrackPrev } from "react-icons/cg";
import { FiRepeat } from "react-icons/fi";
import { useStateProvider } from "../utils/StateProvider";
import axios from "axios";
import { reducerCases } from "../utils/Constants";



export default function PlayerControls() {
  const [{ token, playerState }, dispatch] = useStateProvider();

  const changeState = async () => {
    const state = playerState ? "pause" : "play";
    await axios.put(
      `https://api.spotify.com/v1/me/player/${state}`,
      {},
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token,
        },
      }
    );
    dispatch({
      type: reducerCases.SET_PLAYER_STATE,
      playerState: !playerState,
    });
  };
  const changeTrack = async (type) => {
    await axios.post(
      `https://api.spotify.com/v1/me/player/${type}`, {},
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token,
        },
      }
    );
    dispatch({ type: reducerCases.SET_PLAYER_STATE, playerState: true });
    const response = await axios.get(
      "https://api.spotify.com/v1/me/player/currently-playing",
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token,
        },
      }
    );
    if (response.data !== "") {
      const {item} = response.data;
      const currentPlaying = {
        id: item.id,
        name: item.name,
        artists: item.artists.map((artist) => artist.name),
        image: item.album.images[2].url,
      };
      dispatch({ type: reducerCases.SET_PLAYING, currentPlaying });
    } else {
      dispatch({ type: reducerCases.SET_PLAYING, currentPlaying: null });
    }
  };
  return (
    <Container>
      <div className="shuffle">
        <BsShuffle />
      </div>
      <div className="previous">
        <CgPlayTrackPrev onClick={() => changeTrack("previous")} />
      </div>
      <div className="state">
        {playerState ? 
        ( <BsFillPauseCircleFill onClick={changeState} /> ) : ( <BsFillPlayCircleFill onClick={changeState} /> )
        }
      </div>
      <div className="next">
        <CgPlayTrackNext onClick={() => changeTrack("next")} />
      </div>
      <div className="repeat">
        <FiRepeat />
      </div>
    </Container>
  );
}

I have also imported scope in the Login.jsx and user has to sign up first to use app: I have imply every scope needed for the API but it does not work.

import React from "react";
import styled from "styled-components";
import BeetifyLogo from '../picture/Beetifylogo.png'

export default function Login() {
  const handleClick = async () => {
    const client_id = "1a86a771119745668fedc03a5622ed35";
    const redirect_uri = "http://localhost:3000/beetify";
    const api_uri = "https://accounts.spotify.com/authorize";
    const scope = [
      "user-read-private",
      "user-read-email",
      "user-modify-playback-state",
      "user-read-playback-state",
      "user-read-currently-playing",
      "user-read-recently-played",
      "user-read-playback-position",
      "user-top-read",
    ];
    
    window.location.href = `${api_uri}?client_id=${client_id}&redirect_uri=${redirect_uri}&scope=${scope.join(
      " "
    )}&response_type=token&show_dialog=true`;
  };

I can only get "https://api.spotify.com/v1/me/player/currently-playing" but I can't choose other songs in the soundtrack "PUT https://api.spotify.com/v1/me/player/play 403 (Forbidden)". Everything is 403 error. Please help!