TypeError: Cannot read property 'imports' of undefined (react-quill)

Error:

TypeError: Cannot read property 'imports' of undefined
(anonymous function)
C:/Users/abc/finaltest/node_modules/quill-image-resize-module/image-resize.min.js:1

I installed quill-image-resize using:

npm i --save quill-image-resize-module

Since I'm using react and thus do not have a tsconfig file, I'm unable to follow solutions available on the internet.

My code:

import ReactQuill from 'react-quill'
import Quill from 'quill';
import { ImageResize } from 'quill-image-resize-module'; 
Quill.register('modules/imageResize', ImageResize);

modules = {
        
        toolbar: {
            container:this.toolbarOptions,
            
        },
        ImageResize: {
            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
        }        
        
}

this is what I get when I hover on the import statement

Could not find a declaration file for module 'quill-image-resize-module'. 'c:/Users/abc/final blog/finaltest/node_modules/quill-image-resize-module/image-resize.min.js' implicitly has an 'any' type.

I tried using the require statement, but the error remains the same.

These are my dependencies:

"quill-image-resize-module": "^3.0.0",
"quill-image-resize-module-react": "^3.0.0",
"react": "^17.0.2",
"react-quill": "^1.3.5",

I tried the same with quill-image-resize-module-react, but I couldnt solve the error. My reactquill editor worked before this. I'm not using webpack so I dont even have webpack.config.js to try and solve the issue. I havent done any changes to the original files in node_modules/quill-image-resize-module.

This is the first time I'm trying react and thus would appreciate some help. I'm more than certain it is something under my nose that I'm not able to see. Thank you for your time.