Estoy usando la API de Spotify, que funciona para mostrar datos a largo plazo, mediano plazo o corto plazo. Sin embargo, agregué 'const [activeButton, setActiveButton] = useState(2);' y el código que lo acompaña para intentar que el botón seleccionado se muestre con un color diferente. Después de hacerlo, ya no aparece nada en la página. ¡Cualquier ayuda será apreciada, gracias!

 import axios from 'axios' import React, { useState} from 'react' import Navbar from '../Navbar/Navbar' import Artist from './Artist.js' import { useContext, useEffect } from 'react' import { UserTokenContext } from '../Context/UserTokenContext' import ToggleButton from '@mui/material/ToggleButton' import ToggleButtonGroup from '@mui/material/ToggleButtonGroup' const TopArtists = () => { const {user, setUser, accessToken, setAccessToken} = useContext(UserTokenContext); const TOPARTISTS_ENDPOINT = 'https://api.spotify.com/v1/me/top/artists' const [time, setTime] = useState('medium_term'); const [topArtists, setTopArtists] = useState([]); const [activeButton, setActiveButton] = useState(2); const handleButtonChange = (event, newButton) => { setActiveButton(newButton); console.log(newButton); } const getTopArtists = async () => { const {data} = await axios.get(TOPARTISTS_ENDPOINT, { headers: {Authorization: `Bearer ${accessToken}`,}, params: { time_range: time } }) setTopArtists(data.items); } useEffect(() => { if(user) getTopArtists(); }, [time]) return ( <> <Navbar/> {user ? <div> <h3>Top Artists:</h3> <ToggleButtonGroup exclusive onChange = {handleButtonChange}> <ToggleButton color = {activeButton === 1 ? "red" : "blue"} onClick = {() => { setTime('long_term'); setActiveButton(1);} }>All Time</ToggleButton> <ToggleButton color = {activeButton === 2 ? "red" : "blue"} onClick = {() => { setTime('medium_term'); setActiveButton(2);} }>Past Year</ToggleButton> <ToggleButton color = {activeButton === 3 ? "red" : "blue"} onClick = {() => { setTime('short_term'); setActiveButton(3);} }>Past Month</ToggleButton> </ToggleButtonGroup> {topArtists && topArtists.map(artist => <Artist artist = {artist}/>)} </div> : <p>Log in to see your top artists.</p> } </> ) } export default TopArtists;