Text is shaking after using useEffect in Next JS

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 missing. but it make all my text shaky after render it and start after scrolling the page.

so sorry im newbie here.