Describe the issue

The tooltip does not show up/render when using the newly introduced React 18 function createRoot to initialise the root and render the app.
Codesandbox example for the above

If one reverts to the older ReactDOM.render, then the tooltip shows up.

To Reproduce
Steps to reproduce the behavior:

1. Create a React v18 app and initialise it like this:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement!);
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

2. Hover the geometry
3. Notice the missing tooltip

Expected behaviour
The tooltip should render regardless of how the app is initialised.

Additional Context
This is particularly annoying in NextJS as there you don't have control over the root initialisation and need to downgrade to React v17.

Version (please complete the following information):

• OS: macOS 11
• Browser: Firefox
• Elastic Charts: latest, v51.3.0

Errors in browser console
The console shows neither errors nor warnings. The only noticeable thing is that the #echTooltipPortalMainTooltip node quickly has content. But one instant later it is gone again, nothing is ever painted.

Checklist

• The proper chart type label has been added (e.g. :xy, :partition)
• The proper feature labels have been added (e.g. :interactions, :axis)
• Every related Kibana issue is listed under Kibana Cross Issues list and the kibana cross issue tag is applied