Why is my state being updated constantly on hover when it's an onClick event? – Reactjs

I put a console.log outside of my useEffect that retrieves a youtube url and see that anytime I hover in or out of the parent div, it seems to be retrieving a URL. This is resulting in lots of wasted Youtube API calls, so I’m wondering what the deal is?

It should just be calling my handlePlay function on click of the react icon, which then sets the selectedTrack state. I mean, that does work, but it’s also got the hovering issue.

This is my code:

    const [hovered, setHovered] = useState(false);
    const [selectedTrack, setSelectedTrack] = useState<{ artist: string, title: string } | null>(null)
    const [youtubeURL, setYoutubeURL] = useState<string>('')

    const handlePlay = (title: string, artist: string) => {
        setSelectedTrack({ title, artist });
        console.log('clicked')
      };

    useEffect(() => {

        const getSongURL = async () => {
            if (selectedTrack) 
            try {
                const encodedTitle = encodeURI(selectedTrack.title.toLowerCase());
                const encodedArtist = encodeURI(selectedTrack.artist.toLowerCase());
                const songURL = await axios.get(`http://localhost:8080/api/v1/songdata/req_song/${encodedTitle}%20${encodedArtist}`);
                setYoutubeURL(songURL?.data?.id)
            
                

            } catch (error) {
                console.log("Error finding album details:", error);
              }
        }

        getSongURL();

    }, [selectedTrack])

console.log(youtubeURL)


    return (
        <>
            <ul className='list-none m-0 py-0 px-[35px] relative'>
                <li className='box-border'>
                     <div className='flex justify-between items-center py-0 px-[15px]'>
                        {/* Inner details of block*/}
                            <div className={`group w-full flex justify-between box-border items-center rounded-lg hover:bg-[#4c426e] cursor-pointer self-stretch min-w-0 h-[50px] p-0 mb-2 relative`} 
                                onMouseEnter={() => setHovered(true)}
                                onMouseLeave={() => setHovered(false)}>
                                <div className={`w-full text-[12px] min-w-[35px] max-w-[35px] text-left ml-2 self-center shrink text-lg text-[#989898] relative`}>
                                    <div className={`absolute top-0 left-0 w-full h-full flex items-center justify-center transition-all ease-in-out duration-300`}>
                                        <span style={{ opacity: hovered ? 0 : 100 }} className={`absolute top-0 left-0 w-full h-full flex items-center justify-center transition-all ease-in-out duration-300`} >
                                            {number}
                                        </span>
                                        <span style={{ opacity: hovered ? 100 : 0 }} className={`absolute bottom-0 left-0 w-full h-full flex items-center justify-center transition-all ease-in-out duration-300`} >
                                            <FaPlay onClick={() => handlePlay(title, artist)}/>
                                        </span>
                                    </div>
                                </div>
                                </div>
                            </li>
                        </ul>           
        </>
    )
}

It almost feels like the onMouseEnter and Leave commands are somehow affecting it, but the onClick event shouldn’t even be referencing hovering, so how is it constantly calling my handlePlay function just on hover?