refactor(FE): Refactor form components to improve state handling

src/components/pages/expense/form/ExpenseRealizationForm.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useFormik } from 'formik';
 import toast from 'react-hot-toast';
@@ -90,6 +90,7 @@ const ExpenseRealizationForm = ({
 
   const formik = useFormik<ExpenseRealizationFormValues>({
     initialValues: getExpenseRealizationFormInitialValues(initialValues),
+    enableReinitialize: true,
     validationSchema:
       type === 'edit'
         ? UpdateExpenseRealizationFormSchema
@@ -143,7 +144,6 @@ const ExpenseRealizationForm = ({
     },
   });
 
-  const { setValues: formikSetValues } = formik;
   const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
   const {
@@ -254,10 +254,6 @@ const ExpenseRealizationForm = ({
     formik.setFieldValue('documents', newRequestDocuments);
   };
 
-  useEffect(() => {
-    formikSetValues(getExpenseRealizationFormInitialValues(initialValues));
-  }, [formikSetValues, getExpenseRealizationFormInitialValues, initialValues]);
-
   return (
     <section className='w-full'>
       <header className='flex flex-col gap-4'>