Image Handlers React Quill

Question

May I ask what is the default way of inserting an image and the script from scratch using React Quill? I try seek answer around, but all I got is that Class component. Can you guys help me doing it with Functional Components?

 const imageHandler = useCallback(() => {
    const formData = new FormData()
    const input = document.createElement('input')
    input.setAttribute('type', 'file')
    input.setAttribute('accept', 'image/*')
    input.click()

    input.onchange = async () => {
      const file = input.files[0]
      try {
        console.log(file)
        formData.append('image', file)
      } catch (err) {
        console.log('upload err:', err)
      }
    }
  }, [])

  const modules = useMemo(
    () => ({
      toolbar: {
        container: [...TOOLBAR_CONTENTS],
        handlers: {
          image: imageHandler,
        },
      },
    }),
    [imageHandler],
  )

I can't get the way to insert the picture again after using handler. What should I add to the code?