How can I alter image size in a Quill Editor- React?

I want to give the user flexibility to change image size in a quill editor, How can I do it? I am currently doing it right this but I am getting error. Here is my code:

Quill.register("modules/imageResize", ImageResize);

Editor.modules = {
  toolbar: [
    [{ header: "1" }, { header: "2" }, { font: [] }],
    [{ size: [] }],
    ["bold", "italic", "underline", "strike", "blockquote", "code-block"],
    [
      { list: "ordered" },
      { list: "bullet" },
      { indent: "-1" },
      { indent: "+1" }
    ],
    ["link", "image", "video"],
    ["clean"]
  ],
  imageResize: {
    displaySize: true
  }
};

My error is:

TypeError: Cannot read property 'register' of undefined Function.register C:/Users/muddinahmed/Documents/My Learning/Projects/React/blog-app/node_modules/quill/dist/quill.js:1122 1119 | this.imports[path] = target; 1120 | if ((path.startsWith('blots/') || path.startsWith('formats/')) && target.blotName !== 'abstract') { 1121 | _parchment2.default.register(target); > 1122 | } else if (path.startsWith('modules') && typeof target.register === 'function') { | ^ 1123 | target.register(); 1124 | } 1125 | }

How to do it?

import ImageResize from 'quill-image-resize-module-react';

Quill.register('modules/imageResize', ImageResize);

modules = {
  imageResize: {
     parchment: Quill.import('parchment'),
     modules: ['Resize', 'DisplaySize']
  }
}