Facing default value issue for resizing images

Question

I have used react quill in my react project with react hook form. It is working fine when I store some data & show it in browser. But if I want to see the same value in react quill editor, then the image size has been changed to actual size. Every time, I need to resize it while updating. I have default value like this

"<p>Test</p><p><img src=\"data:image/png;base64,/9j/...../9k=\" style=\"cursor: nwse-resize;\" width=\"97\"></p>"

I am expecting that inside quill editor, default image width will be 97. I have added the sample code below

import ReactQuill, { Quill } from 'react-quill';
import ImageResize from 'quill-image-resize-module-react';
import { ImageDrop } from 'quill-image-drop-module';
import { useForm, useFieldArray, Controller } from "react-hook-form";

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

const modules = {
    toolbar: [
        [
            'bold',
            'italic',
            'underline',
            'strike'
        ],
        [
            'blockquote',
            'code-block'
        ],
        [
            {
                header: [
                    1,
                    2,
                    3,
                    4,
                    5,
                    6,
                    false
                ]
            }
        ],
        [
            {
                list: 'ordered'
            },
            {
                list: 'bullet'
            }
        ],
        [
            {
                script: 'sub'
            },
            {
                script: 'super'
            }
        ],
        [
            {
                indent: '-1'
            },
            {
                indent: '+1'
            }
        ],
        [
            {
                direction: 'rtl'
            }
        ],
        [
            {
                color: []
            },
            {
                background: []
            }
        ],
        [
            'link',
            'image',
            'video'
        ],
        [
            'clean'
        ]
    ],
    clipboard: {
        matchVisual: false
    },
    imageResize: {
        parchment: Quill.import('parchment'),
        modules: [
            'Resize',
            'DisplaySize',
            'Toolbar'
        ],
        displaySize: true
    },
    imageDrop: true
};

const formats = [
    'header',
    'font',
    'size',
    'bold',
    'italic',
    'underline',
    'strike',
    'blockquote',
    'list',
    'bullet',
    'indent',
    'link',
    'image',
    'video',
    'color',
    'align',
    'background',
    'direction',
    'code-block',
    'code'
];

<Controller
    id='description'
    name={`description`}
    control={control}
    render={({ field }) => (
        <ReactQuill
            theme="snow"
            value={field.value}
            modules={modules}
            formats={formats}
            onChange={field.onChange}
        />
    )}
    rules={{
        required: "Description is required"
    }}
/>

Thank you in advance for your help and guidance