I'm working on a React project and recently upgraded from React 17 to React 18. My code was working perfectly in React 17, but now, after upgrading to React 18, I'm facing an issue where only the last state update is being reflected in the formData state. Specifically, when I update multiple forms' data (General, Moxfive, Project), React 18 only reflects the latest update and ignores the intermediate states.

const initialFormData = {
  General: { data: null, isSubmit: false },
  Moxfive: { data: null, isSubmit: false },
  Project: { data: null, isSubmit: false },
};

const [formData, setFormData] = useState(initialFormData);

useImperativeHandle(ref, () => ({
  formSubmitCallback: () => {
    if (!isSaveForm) {
      setTriggerSubmit(uuidv4());
    }
    return isSaveForm;
  },
}));

const a = () => {
  useEffect(() => {
    if (triggerSubmit != null) {
      if (GeneralFormRef.current) {
        GeneralFormRef.current.submit();
      }
    }
  }, [triggerSubmit]);
};

const b = () => {
  useEffect(() => {
    if (triggerSubmit != null) {
      if (MoxfiveFormRef.current) {
        MoxfiveFormRef.current.submit();
      }
    }
  }, [triggerSubmit]);
};

const c = () => {
  useEffect(() => {
    if (projectFormData !== null) {
      setFormData({
        ...formData, // Previous state is merged here
        Project: { data: projectFormData, isSubmit: true },
      });
    }
  }, [projectFormData]);
};