I am using the spotify API, all of which works to display either long term, med term, or short term data. However, I added 'const [activeButton, setActiveButton] = useState(2);' and accompanying code in order to try to have the button that is selected show as a different color. After doing so, nothing renders on the page anymore. Any help would be appreciated thanks!

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;