Menu overlay 'onClick()' & retain scrolling for content underneath (pointer-events?)

I've attached the component, as well as my app.js, to show that it's being invoked outside of the <Routes/> element, so it appears on top of all other components/pages/routes. This is where the problem comes in however, since, in the appNav component itself, I'm applying, conditionally, an overlay which, when active, encompasses the entire width and height of the container. The overlay has an 'onClick()' which triggers the state change in 'isMenuOpen', as a secondary way to close the menu, by clicking the overlay background essentially. I noticed, when this overlay is visible, I'm of course unable to affect anything underneath the overlay with my pointer, so I cannot scroll that content while the overlay is active.. My goal is to maintain the onClick() toggling, but somehow also allow the user to scroll (but not interact with) the content underneath the appNav's overlay element. The "solution" I've had so far is using a state-added class which changes the 'pointer-events' CSS property of the overlay. Ultimately this approach won't work though, since I'm still trying to both have and not have pointer events on the same element simultaneously. I can only ever have scrolling without clickability or vice versa. What would be a better approach to this? (CSS is 3rd attmt/pic)

appNav.js

app.js.js