get data from url and set in state & change default value & handle delete value of states & handle list and filter category and expertise in doctors page & handle search onchange & filter list clinics on change state

app/component/modalSearchCity/Content.js

@@ -12,6 +12,7 @@ function Content({
   updateData,
   handleClose,
   filteredCities,
+  handleSearch,
 }) {
   const citySelected = selected.city;
   const listboxProps = {
@@ -21,6 +22,11 @@ function Content({
     },
   };
 
+  const handleFilter = () => {
+    handleSearch('')
+    handleClose();
+  }
+
   return (
     <div>
       <div className="flex justify-end w-full">
@@ -60,7 +66,7 @@ function Content({
         <div className="w-full flex justify-end">
           <Button
             className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
-            onClick={handleClose}
+            onClick={handleFilter}
             variant="contained"
             color="primary"
             disabled={!selected.city || !selected.province}

app/component/modalSearchCity/index.js

@@ -10,7 +10,7 @@ import statesData from "@/data/state.json";
 import citiesData from "@/data/city.json";
 import Content from "./Content";
 
-function ModalSearchCity({ children, selected, state, setSelected, open, setOpen }) {
+function ModalSearchCity({ children, selected, handleSearch, state, setSelected, open, setOpen }) {
   const provinceSelected = selected.province;
 
   const states = addLabelToList(statesData);
@@ -58,6 +58,7 @@ function ModalSearchCity({ children, selected, state, setSelected, open, setOpen
             selected={selected}
             updateData={updateData}
             handleClose={handleClose}
+            handleSearch={handleSearch}
             filteredCities={filteredCities}
           />
         </Box>