Hello guys, i just need some help regrading the scroll event.

const Header = (props: Props) => {
    const [isScrolled, setIsScrolled] = useState(false);

    useEffect(() => {
      const handleScroll = () => {
        setIsScrolled(true);
      };
  
      window.addEventListener("scroll", handleScroll);
  
      return () => {
        window.removeEventListener("scroll", handleScroll)};
    }, []);

  return (
    <header className={`fixed w-full px-[30px] lg:px-[100px] z-30 h-[100px] lg:h-[140px] flex items-center ${isScrolled ? "bg-red-200" : ''}`}>

In this code, for some reason, header is not changing colour when scrolled. So just to test if the useffect is working, i tried with a different event like mouseover and the colour changes. For info, header is placed in layout.tsx and the scrollable content is another page. Am I doing it wrong or is there specific way of doing? Thanks in advance!