How can I circumvent "passive eventListeners" in reactjs when using event.preventDefault within an onWheel event

Question

I am trying to preventDefault within an onWheel event to make the user scroll to the side on certain elements instead of downwards. When I use e.preventDefault I keep getting the error message: [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

So far all I have seemed to find is ways to disable the error message.

The JSX that calls the function:

    <Wrapper onWheel={(e) => (handleScroll(e))}>

The function that calls e.preventDefault():

  const handleScroll = (e) => {
    e.preventDefault();
    console.info(e.currentTarget);
    const delta = Math.max(-1, Math.min(1, (e.deltaY || -e.detail)));
    e.currentTarget.scrollLeft += delta*40;
  };

Answer 1

I believe you can work around this behaviour by registering your wheel event listener manually. Get a reference to your input's DOM element with ref, and call addEventListener on componentDidMount or in a useEffect hook.