I'm trying to change the state of a sub Component using the onScroll Event Handler but when I run it the state stays the same even with the condition placed all because of the window.pageYOffset staying at 0 hence always making it false.

Header.Frame = function HeaderFrame({ children }) 
{
console.log(window.pageYOffset)
    
const [scrolling,setScrolling]=useState(false);
      
return <Container onScroll={() => setScrolling(window.pageYOffset ===0 ? false:true)}>
                    {children}</Container>;
}