Hook errors in simple implementation

[rslattery206]

Hello, I appreciate any help. I apologize if there is necessary information that I am not including. I am trying to create the simplest possible implementation of the web player. Here is the code:
Home.js:

import { useEffect } from "react";
import {requestAccessToken} from "../authorization"
import MusicPlayer from "../Components/MusicPlayer.js";
function Home() {
  useEffect(() => {
    if (!localStorage.getItem('token')) {
      requestAccessToken()
    }
  }, []);


  return (
    <div className="Home">
      <MusicPlayer/>
    </div>
  );
}

export default Home;

MusicPlayer.js:

import React from "react";
import SpotifyPlayer from "react-spotify-web-playback";


export default function MusicPlayer() {
  const token = localStorage.getItem('token')
  const uri = "spotify:track:39l1UORIhuHvUWfxG53tRZ"
  if (!token) return null
  return (
    <>
    <div style={{width:'400px'}}>
        <SpotifyPlayer
          initialVolume={100}
          layout={"compact"}
          token={token}
          uris={uri}
        />
</div>
    </>
  );
};

As you can see, the token is just stored in local storage, and I'm using a dummy URI.

The app renders a white screen. This is what the console errors look like:

[gilbarbara]

Hey @rslattery206
Your code looks correct, but apparently, the library can't find react: Cannot read properties of null (reading useState).
What version of react are you using? How are you bundling your app (CRA, Vite, etc).
Please create a codesandbox minimal reproducible example.