I tried to use @recogito/annotorious in Next.js.
I have already used that package in React app and it worked.
I am migrating the React app to Next.js, however, I got the error with Annotorious.
How can I fix this?

Here is what I have done.

const Annotorious = dynamic(() => import("@recogito/annotorious"), { ssr: false, });

const ImageAnnotator = ({ imgUrl, arrayOfAnnotations, setArrayOfAnnotations }) => {

    // const [arrayOfAnnotations, setArrayOfAnnotations] = useState([]);
    // Ref to the image DOM element
    const imgEl = useRef();

    // The current Annotorious instance
    const [anno, setAnno] = useState();

    // Current drawing tool name
    const [tool, setTool] = useState('rect');

    // Init Annotorious when the component
    // mounts, and keep the current 'anno'
    // instance in the application state
    useEffect(() => {
        let annotorious = null;

        if (imgEl.current) {
            // Init
            const annotorious = new Annotorious({
                image: imgEl.current
            });

            // annotorious.setAnnotations(arrayOfAnnotations);
            // Attach event handlers here
            annotorious.on('createAnnotation', annotation => {
                console.log('annotations', arrayOfAnnotations);
            });

            annotorious.on('updateAnnotation', (annotation, previous) => {
                console.log('updated', annotation, previous);

            });

            annotorious.on('deleteAnnotation', annotation => {
                console.log('deleted', annotation);
            });
            annotorious.on('selectAnnotation', function (a, shape) {
                console.log('selected');
            });
        }

        // Keep current Annotorious instance in state
        setAnno(annotorious);

        // Cleanup: destroy current instance
        return () => annotorious.destroy();
    }, [arrayOfAnnotations]);

But this code shows the error
annotorious.on is not a function
This component worked in React.