ReactQuill - как обнулить тело после отправки формы?

Question

Следующий код не использует ReactQuill и работает как положено. Форма имеет заголовок и тело. Данные хранятся и отправляются.

import React, { useState, useLayoutEffect } from "react";
import ReactDOM from "react-dom";
import ReactQuill from "react-quill";
import 'react-quill/dist/quill.snow.css'; // ES6


function App() {
  const [formState, setValues] = useState({
    workflowTitle: "",
    workflowContent: ""
  });

  const [formSubmit, setValuesFormSubmit] = useState({
    workflowTitleToDB: "",
    workflowContentToDB: ""
  });

  //______________________________________BEGIN handlers to cache form data

  function handleChange(event){
    setValues({
      ...formState,
      [event.target.name]: event.target.value
    });
  }


  //_________________________________________END handlers to cache form data





function createWorkflow(event){

    event.preventDefault()
    setValuesFormSubmit((prev)=>{
        return {...prev,

          workflowTitleToDB: formState.workflowTitle,
          workflowContentToDB: formState.workflowContent

        }
    });


    setValues((prev)=>{

      return {
        ...prev,
        workflowTitle: "",
        workflowContent: ""
        }

    });


  }


  useLayoutEffect(() => {
    console.log(formState);
    console.log(formSubmit);
  });


  return (

    <form onSubmit={createWorkflow}>
      <label>Title</label>
      <br />
      <input onChange={handleChange} name="workflowTitle" value={formState.workflowTitle} />
      <br />

      <textarea onChange={handleChange} name="workflowContent" value={formState.workflowContent} />  
      <br/>
      <input type="submit" value="Create Workflow"/>
    </form>

  );
}




export default App

Следующий код заменяет элемент textarea на ReactQuill. Добавлен пользовательский обработчик для ReactQuill. Все работает как положено, за исключением того, что тело ReactQuill не обнуляется. Я не уверен, почему, и я хочу знать, как это исправить.

Спасибо.

import React, { useState, useLayoutEffect } from "react";
import ReactDOM from "react-dom";
import ReactQuill from "react-quill";
import 'react-quill/dist/quill.snow.css'; // ES6


function App() {
  const [formState, setValues] = useState({
    workflowTitle: "",
    workflowContent: ""
  });

  const [formSubmit, setValuesFormSubmit] = useState({
    workflowTitleToDB: "",
    workflowContentToDB: ""
  });

    //______________________________________BEGIN handlers to cache form data

  function handleChange(event){
    setValues({
      ...formState,
      [event.target.name]: event.target.value
    });
  }


  function textEditorHandleChange(value){ 
    setValues({
      ...formState,
      "workflowContent": value
    });
  }

  //_________________________________________END handlers to cache form data





  function createWorkflow(event){


    event.preventDefault()
    setValuesFormSubmit((prev)=>{
        return {...prev,

          workflowTitleToDB: formState.workflowTitle,
          workflowContentToDB: formState.workflowContent

        }
    });



    setValues((prev)=>{

      return {
        ...prev,
        workflowTitle: "",
        workflowContent: ""
        }

     })


  }


  useLayoutEffect(() => {
    console.log(formState);
    console.log(formSubmit);
  });




  return (

    <form onSubmit={createWorkflow}>
      <label>Title</label>
      <br />
      <input onChange={handleChange} name="workflowTitle" value={formState.workflowTitle} />
      <br />
      <ReactQuill onChange={textEditorHandleChange} defaultValue={formState.workflowContent} theme="snow" />
      <br/>
      <input type="submit" value="Create Workflow"/>
    </form>

  );
}




export default App