Revert migrating to renderRoot in Html for backwards compatibility

packages/lib/src/vis/shared/Html.tsx

@@ -1,8 +1,7 @@
 import { useThree } from '@react-three/fiber';
 import { useState, useLayoutEffect } from 'react';
 import type { ReactNode } from 'react';
-import type { Root } from 'react-dom/client';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 
 interface Props {
   overflowCanvas?: boolean;
@@ -17,8 +16,6 @@ function Html(props: Props) {
     children,
   } = props;
 
-  const [reactRoot, setReactRoot] = useState<Root>();
-
   const r3fRoot = useThree((state) => state.gl.domElement.parentElement);
   const canvasWrapper = r3fRoot?.parentElement;
 
@@ -30,18 +27,15 @@ function Html(props: Props) {
   const [renderTarget] = useState(() => document.createElement('div'));
 
   useLayoutEffect(() => {
-    const root = createRoot(renderTarget);
-    setReactRoot(root);
+    ReactDOM.render(<>{children}</>, renderTarget); // eslint-disable-line react/jsx-no-useless-fragment
+  }, [children, renderTarget]);
 
+  useLayoutEffect(() => {
     return () => {
-      root.unmount();
+      ReactDOM.unmountComponentAtNode(renderTarget);
     };
   }, [renderTarget]);
 
-  useLayoutEffect(() => {
-    reactRoot?.render(<>{children}</>); // eslint-disable-line react/jsx-no-useless-fragment
-  }, [children, reactRoot]);
-
   useLayoutEffect(() => {
     container?.append(renderTarget);