Prevent multiple calls of "createRoot"

Author: gkjohnson

src/r3f/components/CanvasDOMOverlay.jsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, StrictMode, forwardRef } from 'react';
+import { useMemo, useEffect, StrictMode, forwardRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { useThree } from '@react-three/fiber';
 
@@ -7,8 +7,8 @@ export const CanvasDOMOverlay = forwardRef( function CanvasDOMOverlay( { childre
 
 	// create the dom element and react root
 	const [ gl ] = useThree( state => [ state.gl ] );
+	const [ root, setRoot ] = useState( null );
 	const container = useMemo( () => document.createElement( 'div' ), [] );
-	const root = useMemo( () => createRoot( container ), [ container ] );
 
 	// position the container
 	useEffect( () => {
@@ -29,13 +29,30 @@ export const CanvasDOMOverlay = forwardRef( function CanvasDOMOverlay( { childre
 
 	}, [ container, gl.domElement.parentNode ] );
 
+	// create the react render root
+	useEffect( () => {
+
+		const root = createRoot( container );
+		setRoot( root );
+		return () => {
+
+			root.unmount();
+
+		};
+
+	}, [ container ] );
+
 	// render the children into the container
-	root.render(
-		<StrictMode>
-			<div { ...rest } ref={ ref }>
-				{ children }
-			</div>
-		</StrictMode>
-	);
+	if ( root !== null ) {
+
+		root.render(
+			<StrictMode>
+				<div { ...rest } ref={ ref }>
+					{ children }
+				</div>
+			</StrictMode>
+		);
+
+	}
 
 } );