NextJS onScroll add Class to component

Question

I am new to NextJs and currently building a NextJS Application. I am having a problem with onScroll, I am trying to display the Top header and decrease the padding while onScroll.

The video here show what is happening to my application: NextJs onScroll add Class

And here is my code:

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

const checkScroll = () => {
    if (window.scrollY > 38) {
        setScroll(true);
    } else {
        setScroll(false);
    }
};

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

And in the body I am using this for running:

className={scroll ? "dp-none" : ""}

Here is the image of my code:

Thank you for reading this.