REACTQUILL issue when set the state

Question

i am creating a blog pannel where user can writte blogs and store the blog in firebase but when i update the state with usestate hook the quill edtior stop showing the container and toolbar div are removed from there

type hereimport React, { Component, useEffect } from "react";
import ReactQuill, { Quill } from "react-quill";
import ImageUploader from "quill-image-uploader";
import "react-quill/dist/quill.snow.css";
 import { Link, useNavigate, useNavigation } from "react-router-dom";
 import { useState,memo } from "react";
  import { useDispatch, useSelector } from "react-redux";
import { setBlog } from "../../store/services/BlogSlice";
 Quill.register("modules/imageUploader", ImageUploader);
// import {TitleB,CategoryB,ContentB,BannerImageB} from"../../store/services/BlogSlice"
 const BlogEditor = memo(props => {
 const dispatch=useDispatch();
  const value = useSelector((state)=>state.blog)
  console.log("value",value);
  const [bannerImage,setBannerImage] = useState('');
  const [category,setCategory] = useState('');
  const [title,setTitle] = useState('');
  const [editorHtml,setEditorHtml] = useState('');
  const navigate = useNavigate()
    const update=()=>{
    dispatch(setBlog({
      TitleB:title,
      ContentB:editorHtml,
      BannerImageB:bannerImage,
      CategoryB:category
    }))

    console.log("Title: ", title);
    console.log("Category: ", category);
    console.log("Banner Image: ", bannerImage);
    console.log("Editor HTML: ", editorHtml);

    navigate('/prev')
 

alert("update succefully")

   }
 
 
 const handleChange=(html)=>{
 setEditorHtml(html);
 return
  }

  const handleTitleChange=(event)=> {
  setTitle(event.target.value);
  }

 const handleCategoryChange=(event)=> {
  setCategory(event.target.value);
  }

 const  handleBannerImageChange=(event)=> {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append("image", file);
  
    fetch(
      "https://api.imgbb.com/1/upload?key=334ecea9ec1213784db5cb9a14dac265",
      {
        method: "POST",
        body: formData,
      }
    )
      .then((response) => response.json())
      .then((result) => {
        console.log(result);
        setBannerImage(result.data.url);      })
      .catch((error) => {
        console.error("Error:", error);
      });
  }


  const handleSubmit=(event)=> {
    event.preventDefault();

    console.log("Title: ", title);
    console.log("Category: ", category);
    console.log("Banner Image: ", bannerImage);
    console.log("Editor HTML: ", editorHtml);
  }

 const  modules = {
    toolbar: [
      [{ header: [1, 2, false] }],
      ["bold", "italic", "underline", "strike", "blockquote"],
      [
        { list: "ordered" },
        { list: "bullet" },
        { indent: "-1" },
        { indent: "+1" },
      ],
      ["link", "image"],
      ["clean"],
    ],
    imageUploader: {
      upload: (file) => {
        return new Promise((resolve, reject) => {
          const formData = new FormData();
          formData.append("image", file);

          fetch(
            "https://api.imgbb.com/1/upload?key=334ecea9ec1213784db5cb9a14dac265",
            {
              method: "POST",
              body: formData,
            }
          )
            .then((response) => response.json())
            .then((result) => {
              console.log(result);
              resolve(result.data.url);
            })
            .catch((error) => {
              reject("Upload failed");
              console.error("Error:", error);
            });
        });
      },
    },
  };

 const  formats = [
    "header",
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "list",
    "bullet",
    "indent",
    "link",
    "image",
    "imageBlot",
  ];

  
     
    return (<>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Title:</label>
          <input type="text" value={ title} onChange={e=> setTitle(e.target.value)} />
        </div>
        <div>
          <label>Category:</label>
          <input type="text" value={ category} onChange={handleCategoryChange} />
        </div>
        <div>
          <label>Banner Image:</label>
          <input type="file" onChange={handleBannerImageChange} />
        </div>
        {/* <div dangerouslySetInnerHTML={{ __html:  editorHtml }} /> */}

<div style={{
            minHeight: "500px",
          }}>
        <ReactQuill
          onChange={handleChange}
          theme="snow"
          
          modules={modules}
          formats={formats}
         />
         </div>

        <button  className="su" type="submit">Submit</button>
      </form>
      <button  className="su" onClick={update}>update</button>
    </>
       );
  
})
  export default   BlogEditor;

i just want to store the data in firebase that i can easly asses the data(image) in other project but the richtext editior stop showing after i set the state of the input field