How to get form data before submission in React?

I have an email component that uses a form and rich text editor. All the data is stored in a state variable formData. I want to access this for the purpose of dispatching an RTK action. Basically, when the user leaves the component without submitting the form, I dispatch an action that creates a draft email with the latest form data.

 useEffect(() => {
    return () => {
      dispatch(draftCampaign(formData));
    };
  }, []);

This creates a draft email, however, all the fields are empty since the formData I’m passing is only the initial one, not the submitted one.

My formData:

  const [smsCount, setSmsCount] = useState(0);

  
  const [formData, setFormData] = useState({
    type: "SMS",
    threadName: "",
    from: "Qmeter or 2354",
    customerName: "",
    dropdownOption: "QNP-102 Template",
    to: [],
    startSending: new Date().toLocaleDateString(),
    smsCount: smsCount,
  });

  const {
    threadName,
    from,
    customerName,
    dropdownOption,
    startSending,
    editorContent,
  } = formData;

 

  const onChange = (e) => {
    setFormData((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value,
      smsCount: smsCount,
    }));
    
  };

  const onEditorChange = (content, delta, source, editor) => {
    setFormData((prevState) => ({
      ...prevState,
      editorContent: content,
    }));