show only the first item in appo list & update appo item text && change key in /doctors page URL && handle setting and updating data on first modal filter load

components/doctors/modal/Content.js

@@ -12,27 +12,30 @@ function Content({ data, setData }) {
     router.push(`/doctors?${queryString}`);
   };
 
-  const changeData = (value, name, isCategory) => {
-    changeUrl(value, name);
-    const newData = data;
-    newData[name] = value;
-    const childrenList = specialties.filter((item) => item.parent);
-    const filteredChildrenList = childrenList.filter(
-      (item) => item.parent === value.id
-    );
+  const changeData = (value, name, isCategory, key) => {
+    const newData = { ...data, [name]: value };
+
     if (isCategory) {
-      newData.specialties = "";
-      newData.specialties = filteredChildrenList[0];
+      const childrenList = specialties.filter((item) => item.parent);
+      const filteredChildrenList = childrenList.filter(
+        (item) => item.parent === value.id
+      );
+      const firstChildren = filteredChildrenList[0];
+      console.log(firstChildren);
+
+      newData.specialties = firstChildren || "";
+      changeUrl(firstChildren || value, key);
+    } else {
+      changeUrl(value, key);
     }
+
     setData(newData);
     return newData;
   };
 
-  console.log(data);
-
   return (
     <div className="mt-[50px] px-[0px] md:px-[19px] lg:px-[38px] mb-[32px]">
-      <Form data={data} changeUrl={changeUrl} changeData={changeData} />
+      <Form data={data} changeData={changeData} />
     </div>
   );
 }