React Scroll position rendering not work, help plz

You want to make an event occur when scrolling to that location.

You want to make an event occur when scrolling to that location.
In the current mode, it only works when reloaded at the location, and does not work when it comes to the location while scrolling down from above.
I think I need to usestate, but I tried in many ways but failed. Please help me.

useEffect(() => {
    AOS.init();
    var cnt = document.querySelectorAll(".count")[props.num];
    var water = document.querySelectorAll(".water")[props.num];
    const Skills = document.querySelector('#skills');
    const percentscroll = window.scrollY + Skills.getBoundingClientRect().top;

    if (window.scrollY >= percentscroll) {
        var percent = cnt.innerText;
        var interval;
        interval = setInterval(function () {
            percent++;
            cnt.innerHTML = percent;
            water.style.transform = 'translate(0' + ',' + (100 - percent) + '%)';
            if (percent == props.percent) {
                clearInterval(interval);
            }
        }, 60);
    }
    
}, [])