current undefined in root.current.render

[janseke10]

I'm trying to build a widget using react-three-fiber in Mendix.

I keep getting the error 'current' undefined, which I can trace back to the root.current.render after the root was created and configured, in the process of creating a canvas.
I've tried it the 'normal' way, by simply calling
But also this way:

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(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%" }} />;

}

In both options it says the 'current' is undefined in root.current.render. I've also tried to do it like this:
const root.current = createRoot(canvasRef.current);

        root.current.configure({ events, camera: { position: [0, 0, 50] } });

        root.current.render(<ThreeViewer {...props} />);

I'm very confused. Does anyone know how I could solve this problem?