Как загрузить изображение внутри содержимого React-Quill?

#typescript #react-quill

Вопрос:

Я делаю доску объявлений с реактивным пером. Однако, когда я загружаю изображение, изображение не выходит из содержимого. И при проверке с помощью console.log URL-адрес изображения пуст. Что в этом плохого?

 function Post() {

  const   QuillRef = useRef<ReactQuill>()
  const [Title, setTitle] = useState("")  
  const [contents, setcontents] = useState("")    

  const imageHandler = () => {
    const input = document.createElement("input");
    const formData = new FormData();


    input.setAttribute("type", "file");
    input.setAttribute("accept", "image/*");
    input.click();

    input.onchange = async () => {
      const file : any = input.files;
      if (file !== null) {
        formData.append("image", file[0]);

        console.log(formData)
      }
    }
  }
  const titleHandler = (e : React.ChangeEvent<HTMLTextAreaElement>) => {
      e.preventDefault()
      setTitle(e.currentTarget.value)
  }


  return (
    <div className="post">
        <ReactQuill
        style = {{height : "650px"}}
          ref = {(element) => {
            if(element != null) {
              QuillRef.current = element
            }
          }}
          value = {contents || ""}
          onChange = {(content, delta, source, editor) => setcontents(editor.getHTML())}
          modules = {modules}
          formats = {formats}
          theme = "snow"
          placeholder = "내용을 입력해주세요"/>
    </div>
  );
}

export default Post;
 

Я попробовал несколько способов, но потерпел неудачу. Каков обходной путь??