I want to build my client website like ssk.com and I tried to change the JQuery code from this jsfiddle.net/LmkwxkfL to the code. but seems I failed to translate the code.

Result: text is shaking after scrolling

This is my code:

const [scroll, setScroll] = useState(0);

useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => {
        window.removeEventListener("scroll", handleScroll);
    };
});

function handleScroll() {
    setScroll(
        window.scrollY ||
        window.scrollTop ||
        document.getElementsByTagName("html")[0].scrollTop,
        document.documentElement.style.setProperty("--scroll-var", scroll + "px")
    );
}

I don't know what is missing, but it makes all my text shaky after rendering it and starts after scrolling the page.

So sorry I'm a newbie here.