fix initial 2 work experiences (paths 2,3,4)

frontend/src/components/Step3.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from "react";
+import { useContext } from "react";
 import { Link } from "react-router-dom";
 
 import deleteIcon from "../assets/deleteIcon.svg";
@@ -16,6 +16,30 @@ export type StepProps = {
 
 function WorkExperienceSection({ pathNumber }: { pathNumber: number }) {
   const { formData, setFormData } = useContext(FormContext);
+  const isRequired = [2, 3, 4].includes(pathNumber);
+
+  if (isRequired && formData.WorkExperience.length === 0) {
+    const newWorkExperience: WorkExperience = {
+      designExperience: "",
+      numHours: 0,
+      superviserName: "",
+      superviserPhoneNum: "",
+      superviserEmail: "",
+      companyName: "",
+      companyAddress: "",
+      companyCity: "",
+      companyState: "",
+      companyZip: "",
+      companyCountry: "",
+      hireDate: "",
+      lastDateWorked: "",
+    };
+
+    setFormData({
+      ...formData,
+      WorkExperience: [newWorkExperience],
+    });
+  }
 
   const handleInputChange = (
     index: number,
@@ -65,14 +89,6 @@ function WorkExperienceSection({ pathNumber }: { pathNumber: number }) {
     }));
   };
 
-  const isRequired = [2, 3, 4].includes(pathNumber);
-
-  useEffect(() => {
-    if (isRequired && formData.WorkExperience.length === 0) {
-      addWorkExperience();
-    }
-  }, [isRequired, formData.WorkExperience.length]);
-
   return (
     <div className={styles.formSection}>
       <div className={styles.titleContainer}>