Why After imageHandler funtion ImageResize didnt work?

Question

I want to build rich text editor in react using quill. I implement write math formulas (katex), style images. But after add imageHundler function katex and image resize didnt work. Here my code.

import React, { createRef, useEffect, useRef, useState } from 'react'
import ReactQuill, {Quill} from 'react-quill'
import katex from 'katex'
import 'quill/dist/quill.snow.css'
import "katex/dist/katex.css";
import "./query";
import "mathquill/build/mathquill.js";
import "mathquill/build/mathquill.css";
import mathquill4quill from "mathquill4quill";
import "mathquill4quill/mathquill4quill.css";
import ImageResize from 'quill-image-resize-module-react';
var Size = Quill.import('attributors/style/size');
Size.whitelist = ["8px", "10px", "11px","12px","13px",'14px', "15px", '16px', '18px', "24px", "36px", "48px"];
Quill.register(Size, true);
Quill.register('modules/imageResize', ImageResize);


const colors = ['#f3901d', '#ed5c57', '#00b050', '#52a7f9', '#b36ae2', '#fefd32', 
                "#de6a19", "#c82613", '#0d882a', '#0c64c0', '#763e9b', '#ffd966', 
                "#be5b17", "#861106", '#0e5c1b', '#174f86', '#5e317c', '#f1c232',
                "#005ff9", "#333333", '#747070', '#d9d9d9', '#f2f2f2', '#ffffff',  
]

const toolbar =  [
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ font: [] }, { 'size': ["8px", "10px", "11px","12px","13px",'14px', "15px", '16px', '18px', "24px", "36px", "48px"] }],
    // { 'size': ['small', false, 'large', 'huge'] }
    [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
    ['bold', 'italic', 'underline', 'strike'],
    [{ color: colors }, { background: colors }],
    [{ 'size': ['small', false, 'large', 'huge'] }]
    [{ script: "sub" }, { script: "super" }],
    [{ align: [] }],
    ["link", "image", "blockquote", "code-block", "formula"],
    ["clean"],
   
]
window.katex = katex
export default function TextEditor() {
    const ref= useRef()
   
    const [value, setValue] = useState('')
    useEffect( ()=>{
        const enableMathQuillFormulaAuthoring = mathquill4quill({ Quill, katex });
        enableMathQuillFormulaAuthoring(
            ref.current.editor,
        );
        
    },[] )
    function insertToEditor(url) {
        var range = ref.getEditor().getSelection();
        ref.getEditor().insertEmbed(range.index, 'image', url, "user");
    }
    function saveToServer(file) {
        const fd = new FormData();
        fd.append("upload", file);
        
        insertToEditor(URL.createObjectURL(file));
    }
    const imageHandler = async (a) => {
        console.log("geldim",a)
        const input = document.createElement('input');

        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.click();
        input.onchange = async () => {
            var file = input && input.files ? input.files[0] : null;
            // console.log(file)
            var formData = new FormData();
            formData.append("file", file);
            let quillObj = ref.current.getEditor();
            const range = quillObj.getSelection()
            
            const Image = Quill.import("formats/image")
            const url = window.URL.createObjectURL(file)
            Image.sanitize = (url) => url
            ref.current.getEditor().insertEmbed(range.index, "image", url)
            ref.current.getEditor().setSelection(range.index + 1);
            document.body.querySelector(':scope > input').remove()
        };
    }
    
    return (
        <ReactQuill
        value={value}
        onChange={setValue}
          ref={ref}
          className='site-container'
          modules={{
            formula: true,
            toolbar: {
                container: toolbar,
                handlers:{
                    image: imageHandler
                }
            },
            imageResize: {
                parchment: Quill.import('parchment')
            }
          }}
          theme="snow"
        />
      );

}