Render previous select input options when switching between workflows in builder

src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

@@ -1,7 +1,7 @@
 import { WorkflowStep } from "@/interfaces/approval.workflow";
 import Option from "@/interfaces/option";
 import { CorporateUser, TeacherUser } from "@/interfaces/user";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { AiOutlineUserAdd } from "react-icons/ai";
 import { BsTrash } from "react-icons/bs";
 import { LuGripHorizontal } from "react-icons/lu";
@@ -16,6 +16,7 @@ interface Props extends WorkflowStep {
 
 export default function WorkflowEditableStepComponent({
     stepNumber,
+    assignees = [null],
     finalStep,
     onDelete,
     onSelectChange,
@@ -47,6 +48,19 @@ export default function WorkflowEditableStepComponent({
         [entityCorporates]
     );
 
+    const allOptions = useMemo(() => [...teacherOptions, ...corporateOptions], [teacherOptions, corporateOptions]);
+
+    useEffect(() => {
+        if (assignees && assignees.length > 0) {
+            const initialSelects = assignees.map((assignee) =>
+                typeof assignee === 'string' ? allOptions.find(opt => opt.value === assignee) || null : null
+            );
+            if (JSON.stringify(initialSelects) !== JSON.stringify(selects)) {
+                setSelects(initialSelects);
+            }
+        } 
+    }, [assignees, allOptions]);
+
     const selectedValues = useMemo(() => 
         selects.filter((opt): opt is Option => !!opt).map(opt => opt.value),
         [selects]