I'm struggling to see what is wrong with my code here, but essentially the function from the useSongInfo hook is working, however it isn't updating the player UI.

I've attached both components below. Whenever I click a new song, I can see the new data coming through in the console.log(songInfo?.name), however it is not showing he dynamic image or dynamic text component data inside the Box.

Does anyone have any idea what is happening? I've also tried using Context to store the songInfo globally, however still get the same issue.

const Player = () => {
    const songInfo = useSongInfo()
    console.log(songInfo?.name, "song info from player");

  return (
    <Box
      position={"fixed"}
      bottom={0}
      left={0}
      right={0}
      bg={"gray.100"}
      height={"80px"}
    >
      <Box position={"relative"} w={12} h={12}>
        {songInfo?.album.images[1]?.url ? (
          <Image src={songInfo?.album.images[1]?.url} layout={"fill"} />
        ) : (
          <Box />
        )}
        <Text>{songInfo?.name} TEST</Text>
      </Box>
    </Box>
  );
};


function useSongInfo() {
  const currentTrackId = "123"
  const spotifyAccessToken = "dummy-access-token"

  const [songInfo, setSongInfo] = useState<SpotifySong>();

  useEffect(() => {
    const fetchSongInfo = async () => {
      if (currentTrackId && spotifyAccessToken) {
        const trackInfo = await fetch(
          `https://api.spotify.com/v1/tracks/${currentTrackId}`,
          {
            headers: {
              Authorization: `Bearer ${spotifyAccessToken}`,
            },
          }
        ).then((res) => res.json());
        setSongInfo(trackInfo);
      }
    };
    fetchSongInfo();
  }, [currentTrackId, spotifyAccessToken]);

  return songInfo;
}

To show that values change on click, here are values from both songInfo?.name and songInfo?.album.images1?.url