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

src/components/pages/expense/form/ExpenseRequestForm.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';
@@ -102,6 +102,7 @@ const ExpenseRequestForm = ({
 
   const formik = useFormik<ExpenseRequestFormValues>({
     initialValues: getExpenseFormInitialValues(initialValues),
+    enableReinitialize: true,
     validationSchema:
       type === 'edit'
         ? UpdateExpenseRequestFormSchema
@@ -171,7 +172,7 @@ const ExpenseRequestForm = ({
     },
   });
 
-  const { setValues: formikSetValues } = formik;
+  const { setFieldValue, setFieldTouched } = formik;
 
   const {
     setInputValue: setLocationInputValue,
@@ -186,8 +187,8 @@ const ExpenseRequestForm = ({
   } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
 
   const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
-    formik.setFieldTouched('category', true);
-    formik.setFieldValue('category', val);
+    setFieldTouched('category', true);
+    setFieldValue('category', val);
   };
 
   const locationChangeHandler = useCallback(
@@ -195,12 +196,12 @@ const ExpenseRequestForm = ({
       const location = val as OptionType | null;
       const locationId = location ? Number(location.value) : 0;
 
-      formik.setFieldTouched('location', true);
-      formik.setFieldValue('location', location);
-      formik.setFieldTouched('location_id', true);
-      formik.setFieldValue('location_id', locationId);
+      setFieldTouched('location', true);
+      setFieldValue('location', location);
+      setFieldTouched('location_id', true);
+      setFieldValue('location_id', locationId);
     },
-    []
+    [setFieldTouched, setFieldValue]
   );
 
   const kandangsChangeHandler = (
@@ -343,10 +344,6 @@ const ExpenseRequestForm = ({
     formik.handleSubmit(e);
   };
 
-  useEffect(() => {
-    formikSetValues(getExpenseFormInitialValues(initialValues));
-  }, [formikSetValues, getExpenseFormInitialValues, initialValues]);
-
   return (
     <>
       <section className='w-full'>