我把console.log放在了useEffect之外，它可以检索youtube的网址，我看到每当我把鼠标悬停在父div中或从父div中移出时，它似乎都在检索一个网址，这导致了大量浪费的youtube API调用，所以我想知道这是怎么回事？
它应该在点击react图标时调用我的handlePlay函数，然后设置selectedTrack状态，我的意思是，这确实有效，但它也有悬停问题。
这是我的代码：

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>           
        </>
    )
}

这几乎感觉像是onMouseEnter和Leave命令在某种程度上影响了它，但是onClick事件甚至不应该引用悬停，那么它是如何在悬停时不断调用我的handlePlay函数的呢？