Unable to use the Draw tool

[naccib]

Environment

I am using React 18 with TypeScript. DWV is instantiated like so:

// One time setup
    useEffect(() => {
        if(app) {
            return;
        }

        if(seriesCollection.length === 0) {
            console.log('No series found');
            return;
        }

        console.log('Setting up viewer...');

        const newApp = new App();
        const viewConfig = new ViewConfig(ROOT_ID);

        const opts = new AppOptions({'*': [viewConfig] });

        opts.tools = {
            Scroll: new ToolConfig(),
            ZoomAndPan: new ToolConfig(),
            Draw: new ToolConfig(['Rectangle', 'Ruler', 'Ellipse', 'Arrow', 'Circle'])	
        };

        newApp.init(opts);

        const series = seriesCollection[0];

        newApp.loadFiles(series.files);

        newApp.addEventListener('load', () => {
            console.log('Finished loading DICOM files.');

            setImagesLoadingComplete(true);
            
            newApp.setTool('Scroll');
        });

        setApp(newApp);
    }, [app, seriesCollection]);

Bug description

DWV errors on click with the Draw tool selected (using any shape). First, it errors with:

this[#Ki][this[#Vr]] is not a constructor
TypeError: this[#Ki][this[#Vr]] is not a constructor
    at #Kr (draw.js:275:1)
    at #_r (draw.js:258:1)
    at #jr (draw.js:236:1)
    at mousedown (draw.js:382:1)
    at Array.n (toolboxController.js:241:1)
    at He.fireEvent (listen.js:70:1)
    at #Re (drawLayer.js:659:1)

Then, after each second or so, it errors with:

Cannot read properties of null (reading 'getX')
TypeError: Cannot read properties of null (reading 'getX')
    at #$r (draw.js:325:1)
    at mousemove (draw.js:397:1)
    at Array.n (toolboxController.js:241:1)
    at He.fireEvent (listen.js:70:1)
    at #Re (drawLayer.js:659:1)

[ivmartel]

How do you activate the draw tool? Check https://github.com/ivmartel/dwv-react for a react integration example.