change function of fliter sort, modal and locate set new data and change it and update

app/component/modalSearchCity/index.js

@@ -6,32 +6,31 @@ import { styleDefault } from "@/mui";
 import { addLabelToList } from "@/helper";
 
 // Data
-import statesData from "@/data/state.json";
-import citiesData from "@/data/city.json";
+import states from "@/data/state.json";
+import cities from "@/data/city.json";
 import Content from "./Content";
 
 function ModalSearchCity({
   open,
   state,
+  filter,
   setOpen,
   children,
-  selected,
-  setDoctors,
-  handleSearch,
-  setSelected,
+  setFilter,
+  modalLocate,
 }) {
-  const provinceSelected = selected.province;
+  const stateSelected = filter?.state?.name;
 
-  const states = addLabelToList(statesData);
-  const cities = addLabelToList(citiesData);
+  // const states = addLabelToList(statesData);
+  // const cities = addLabelToList(citiesData);
   const [filteredCities, setFilteredCities] = useState([]);
 
   const handleClose = () => setOpen(false);
 
   useEffect(() => {
-    if (provinceSelected) {
+    if (stateSelected) {
       const selectedState = states.find(
-        (state) => state.label === provinceSelected
+        (state) => state.name === stateSelected
       );
       if (selectedState) {
         const stateId = selectedState.id;
@@ -43,15 +42,15 @@ function ModalSearchCity({
     } else {
       setFilteredCities([]);
     }
-  }, [provinceSelected]);
+  }, [stateSelected]);
 
-  const updateData = (event, name) => {
-    if (name === "province" && event !== provinceSelected) {
-      setSelected({ province: event.name, city: "" });
-    } else {
-      setSelected({ ...selected, [name]: event.name });
-    }
-  };
+  // const updateData = (event, name) => {
+  //   if (name === "province" && event !== stateSelected) {
+  //     setSelected({ province: event.name, city: "" });
+  //   } else {
+  //     setSelected({ ...selected, [name]: event.name });
+  //   }
+  // };
 
   return (
     <>
@@ -64,11 +63,10 @@ function ModalSearchCity({
           <Content
             state={state}
             states={states}
-            selected={selected}
-            setDoctors={setDoctors}
-            updateData={updateData}
+            filter={filter}
+            setFilter={setFilter}
             handleClose={handleClose}
-            handleSearch={handleSearch}
+            modalLocate={modalLocate}
             filteredCities={filteredCities}
           />
         </Box>