Estoy luchando por ver qué está mal con mi código aquí, pero esencialmente la función del gancho useSongInfo está funcionando, sin embargo, no está actualizando la interfaz de usuario del reproductor.

He adjuntado ambos componentes a continuación. Cada vez que hago clic en una nueva canción, puedo ver los nuevos datos que llegan en console.log(songInfo?.name), sin embargo, no muestra la imagen dinámica o los datos del componente de texto dinámico dentro del cuadro.

¿Alguien tiene alguna idea de lo que está pasando? También intenté usar Context para almacenar la información de la canción globalmente, sin embargo, sigo teniendo el mismo problema.

 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; }

Para mostrar que los valores cambian al hacer clic, aquí hay valores de songInfo?.name y songInfo?.album.images 1 ?.url