Cannot scroll into my parallax component, only when moving the mouse it triggers the scroll inside it

I'm doing a webpage and I have a parallax component in the middle of it, when I'm scrolling from top to bottom of the page, and parallax comes in view, the scroll doesn't trigger on it, only when I stop the mouse for a moment inside the parallax element the browser triggers scroll to that element.

I saw this question on stackoverflow, but the response didn't work for me. This is what I've tried:

1. Created a handleScroll function

const handleScroll = () => {
    ref.current.container.current.click();
};

2. Set a ref to Parallax wrapper <Parallax ref={ref} pages={4} className={styles.parallax}>
3. Added a onMouseOver listener to trigger the handleScroll so the element clicks it self

          <Parallax
            ref={ref}
            pages={4}
            className={styles.parallax}
            onMouseOver={handleScroll}
            onClick={() => console.log(`i was clicked`)}
          >

This dont work, when I scroll kinda fast, the onmouseover is not recognized, there are any other ways I can trigger a click to my parallax so it get focus and browser starts scrolling on it instead of the main content scroll bar?