Hi, I'm building a pluggable widget using react. In this widget I want to display 3D models, preferably using the React-Three-Fiber library. However, I need to have a html 'canvas' element in order to use the createRoot function of react-three-fiber. I've been trying to 'create' this like this: import { createRoot, events } from "@react-three/fiber"; import { ReactElement, createElement, useRef, useEffect } from "react"; import { ThreeViewer, ViewerProps } from "./components/3DViewer"; import "./ui/Viewer.css"; export function Viewer(props: ViewerProps): ReactElement { const canvasRef = useRef<HTMLCanvasElement>(null); useEffect(() => { if (!canvasRef.current) return; const root = createRoot(canvasRef.current); root.configure({ events, camera: { position: [0, 0, 50] } }); root.render(<ThreeViewer {...props} />); }, []); return <canvas ref={canvasRef} style={{ width: "100%", height: "100%" }} />; } I keep getting this error though: Cannot read properties of undefined (reading 'current') TypeError: Cannot read properties of undefined (reading 'current') on the line root.render(<ThreeViewer {...props} />); It tries to get to root.current, and cannot find it. How can I add this DOM canvas object (because that is what I need) instead, such that I can add these 3D models? Thanks in advance! Janneke