Как передать в функцию массив значений сформированный в другой функции?

Пытаюсь реализовать посекционный скролл на react. Получил позицию каждой секции на странице с помощью window.onload():

export default function Home() {
let yPositions = []
    window.onload = () => {
        Array.from(document.getElementsByTagName('section')).map((sectionItem, index) => {
            yPositions.push(sectionItem.getBoundingClientRect().top + document.documentElement.scrollTop)
            return yPositions
        })
    }

Хочу передать сформированный массив в handleScroll:

const handleScroll = (yPositions) => {
        let i = 0
        let currentScrollPosition = window.scrollY + yPositions[i]
        setScroll(yPositions[i]);
        let windowScrolls = window.scrollY;
        i++;
        console.log(yPositions)
        if (windowScrolls > 0) toTopBtnRef.current.classList.add("totopbtn--active")
        else toTopBtnRef.current.classList.remove("totopbtn--active")
    };
return (...код компонента)
}

Но туда передается пустой массив. Как его правильно передать? Вызываю handleScroll так:

    const [scroll, setScroll] = useState(0);
    useEffect(() => {
        window.addEventListener("scroll", handleScroll(yPositions));

        return () => window.removeEventListener("scroll", handleScroll);


    }, []);