mouse-scrolling an element inside shadowRoot does not work in chrome

I have a div inside a shadowRoot that has a fixed height and overflow set to auto. The content is larger than the box and therefor scrollbars appear. When the (outer) page allready has scrollbars it seems that it does not scroll the div when using chrome. Mouse-scrolling will only target the page even though hovering the div.

When doing this outside a shadowRoot the div hovered is being scrolled when using the mouse. And it seems this issue works in other browsers than chrome even when using a shadowRoot.

const App = () => {
  return (
    <div
      className="App"
      style=
    >
      <h1 style=>Try mouse-scrolling here</h1>
      <h2>Hidden!</h2>
    </div>
  );
}

const container = document.createElement("div");
const shadowRoot = container.attachShadow({ mode: "open" });
const domElement = document.getElementById("root");

domElement.append(container);
const root = ReactDOM.createRoot(shadowRoot);

root.render(<App />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<div style="height: 1000px">
  <div id="root">Hello world</div>
</div>

In this example if setting element.style root element to overflow: hidden it the scrollbar starts to work in the div.

I have tried to set onMouseEnter={() => (document.body.style.overflow = 'hidden')} onMouseLeave={() => (document.body.style.overflow = 'auto')} on the App and that kind of solves the problem but it ends up with the page moving slightly. I also tried to add the scrollbar-gutter: stable; to remove this glitch when removing the outer scrollbar and it kind of works, but I would like to have a fix that does not have to change the webpage itself that much.

Is there a way to make the div handle mouse scrolling without these hacks ?

(There is also a working example in codesandbox: https://codesandbox.io/s/scrollbar-issue-f5tgm4?file=/src/index.js)

from mouse-scrolling an element inside shadowRoot does not work in chrome