Why isn't my onScroll event firing on child elements react?

I have a child and a parent element.

the css is the following:

.parent {
  height: 100vh;
}

I have an 'onScroll' event linstener on the parent element which works perfectly. But If I add an 'onScroll' event linster to the child element, the event doesn't fire... Interestingly I've noticed that the event on the parent element doesn't fire either if I remove the 'height': 100vh' property. So I add the same height property to the child but it still does not work.

What I'd like to do is firing the scroll event on the child element without having to deal with the parent. How can I achieve this?

parent:

    function App() {
      return (
            <BrowserRouter>
              <div className="app" onScroll={onScroll} this fires>
                {(menuToggled)?<Menu menuToggled={menuToggled} 
    closesMenu={closesMenu}/>:null}
                <Nav handlesMenuBtn={handlesMenuBtn} />
                  <Routes>
                      <Route path='/' element={<Home />}></Route>
                      <Route path='/about' element={<About/>}></Route>
                      <Route path='/contact' element={<Contact/>}></Route>
                      <Route path='/projects' element= 
    <Projects/>}></Route>
                  </Routes>
                  <Footer />
              </div>
            </BrowserRouter>
          )
        }

child:

function Projects() {
   
    useEffect(() => {
    })

    return (
        <div className="projects-menu" onScroll={()=>{console.log("working")}} this doesn't fire>
            <div className="projects-menu-container">
                <div className="big-letters-container">
                    <p className='super-big-letters-about' style={{color: 'rgba(255, 164, 0, 0.5)'}}> PROJECTS</p>
                    <p className="big-letters" style={{zIndex: '1'}}>
                        PROJECTS
                    </p>
                </div>
                <div className="project-container">
                    <Project />
                </div>
            </div>
        </div>
    )
}

Thank you very much for your time