[GEN-1848]: fix form deep values (#1901)

frontend/webapp/hooks/common/useGenericForm.ts

@@ -1,7 +1,14 @@
 import { useState } from 'react';
 
 export const useGenericForm = <Form = Record<string, any>>(initialFormData: Form) => {
-  const [formData, setFormData] = useState<Form>({ ...initialFormData });
+  function copyInitial() {
+    // this is to avoid reference issues with the initial form data,
+    // when an object has arrays or objects as part of it's values, a simple spread operator won't work, the children would act as references,
+    // so we use JSON.parse(JSON.stringify()) to create a deep copy of the object without affecting the original
+    return JSON.parse(JSON.stringify(initialFormData));
+  }
+
+  const [formData, setFormData] = useState<Form>(copyInitial());
   const [formErrors, setFormErrors] = useState<Partial<Record<keyof Form, string>>>({});
 
   const handleFormChange = (key?: keyof typeof formData, val?: any, obj?: typeof formData) => {
@@ -30,7 +37,7 @@ export const useGenericForm = <Form = Record<string, any>>(initialFormData: Form
   };
 
   const resetFormData = () => {
-    setFormData({ ...initialFormData });
+    setFormData(copyInitial());
     setFormErrors({});
   };