Spotify API: Error 401, "Permissions missing" - api

Question

I am trying to make use of spotify api to play songs in my webapp. I have implemented the authorization using next-auth with spotify and with the session I have pulled all my playlists to show in a list. However, when I try to play a song in that list even though I have given all the correct scopes for the PUT request and i am using a premium spotify account, it gives me this error of 401 "permissions missing".
Here is my code where I have authenticated and also given all the needed scopes.
const scopes = [
"user-read-email",
"playlist-read-private",
"playlist-read-collaborative",
"streaming",
"user-read-private",
"user-library-read",
"user-top-read",
"user-read-playback-state",
"user-modify-playback-state",
"user-read-currently-playing",
"user-read-recently-played",
"user-follow-read",
"user-library-modify",
"user-follow-modify",
"playlist-modify-public",
].join(",");
const params = {
scope: scopes,
};
const queryParamString =new URLSearchParams(params);
const LOGIN_URL = "https://accounts.spotify.com/authorize?"+ queryParamString.toString();
const spotifyApi = new SpotifyWebApi({
clientId: process.env.SPOTIFY_CLIENT_ID,
clientSecret: process.env.SPOTIFY_CLIENT_SECRET,
})
export default spotifyApi;
export { LOGIN_URL };
I tried everything including reading though the spotify api docs but nothing seems to work. Here is my code which I implemented for plaing a song:
import React from 'react';
import useSpotify from '../hooks/useSpotify';
import Image from 'next/image';
import { millisToMinutes } from '../lib/time';
import { useRecoilState } from 'recoil';
import { currentTrackIdState, isPlayingState } from '../atoms/songAtom';
function Song({order, track}) {
const spotifyApi = useSpotify();
const [currentTrackId, setCurrentTrackId] = useRecoilState(currentTrackIdState);
const [isPlaying, setIsPlaying] = useRecoilState(isPlayingState);
const playSong = () => {
setCurrentTrackId(track.track.id);
setIsPlaying(true);
spotifyApi.play({
uris: [track.track.uri],
});
};
console.log(track.track.uri);
return (
<div className='grid grid-cols-2 text-gray-500 py-4 px-5 hover:bg-gray-900 rounded-md cursor-pointer'
onClick={playSong}>
<div className='flex items-center space-x-4'>
<p>{order+1}</p>
<Image alt='' src={track.track.album.images[0].url} height={40} width={40} />
<div>
<p className='w-36 lg:w-64 truncate text-white'>{track.track.name}</p>
<p className='w-40'>{track.track.artists[0].name}</p>
</div>
</div>
<div className='flex items-center justify-between ml-auto md:ml-0'>
<p className='hidden md:inline w-40'>{track.track.album.name}</p>
<p>{millisToMinutes(track.track.duration_ms)}</p>
</div>
</div>
)
}
export default Song