createRoot causes various issues with performance and css behaviour

[SourceCipher]

Describe the bug

After upgrading our project, I realised that all the antd components with the tooltips or menus has the flickering issue when hovering off them as well as our table which is used to be very fast in performance, with the new upgrades became slow in scrolling responses and rendering. So I debugged down to 1 line of code which was causing this issue. It was the way we render the App component using createRoot.

Steps to reproduce

1. Go to https://codesandbox.io/s/jolly-kalam-5mu6oi?file=/src/index.js
2. Try hover on the button, you will see the tooltip flickering when you hover off the button.
3. Try to modify the index.js and render the App the old way using ReactDOM.render
4. Hover on the button and the tooltip will act normally

Expected behavior

Tooltips of antd components should not flicker on hover off

Actual behavior

Tooltips, menus of antd components flicker on hover off

[ifen]

We are also experiencing this issue on our side. Pretty much identical to the case described above.

[SourceCipher]

I have a feeling its something to do with the mouse events, because the scrolling is not working as well as it used to, other libraries like drag and drop ones which using mouse events are totally broken when using createRoot and working with the old way we render App component.

[SourceCipher]

Not sure if any issues are reviewed here to be honest as there are so many of them. I mean in our case we cant upgrade to the latest react because it breaks the whole project or its unusable, too slow, too many issues compared with the old one.

[techbro965]

I tried to update to the latest react on a project and I am getting the same results. Would be really helpful to get a fix for this.