React-Quilljs image resize & alignment not working

Question

I am using react-quilljs for image resize feature. When I position and resize the image in the editor, it works fine. I have even console.log the size if that is changing or not, but it's working okay. But after I have submitted to the API and reopen the modal, the styles do not apply anymore. Is the problem when I am inserting the image back into the editor I am losing the styles? I don't get it. I have tried looking everywhere for the solution, but nothing seems to work.

This is my code.

export default function TextEditor({
  value,
  onValueText,
}) {
  const { quill, quillRef, Quill } = useQuill({
    modules: { blotFormatter: {} },
  });

  if (Quill && !quill) {
    Quill.register('modules/blotFormatter', BlotFormatter);
  }

  const selectLocalImage = () => {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();

    input.onchange = async () => {
      var file: any = input && input.files ? input.files[0] : null;
      console.log(file);
      var formData = new FormData();
      formData.append('file', file);

      apiClient
        .uploadImage({ formData })
        .then((res: any) => {
          const range = quill?.getSelection();
          if (range) {
            quill?.insertEmbed(
              range.index,
              'image',
              `${process.env.NEXT_PUBLIC_CLOUD_FRONT_URL!}/${res.data}`
            );
          }
        })
        .catch((err: any) => {
          console.log(err);
        });
    };
  };

  useEffect(() => {
    if (quill) {
      quill.clipboard.dangerouslyPasteHTML((value as string) || '');
      quill.getModule('toolbar').addHandler('image', selectLocalImage);
      quill.on('text-change', (delta, oldDelta, source) => {
        onValueText(quill.root.innerHTML);
      });
    }
  }, [quill]);

  return (
    <div>
      <div ref={quillRef} />
    </div>
  );
}}