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

components/doctors/search/SearchField.js

@@ -1,12 +1,12 @@
 import { TextField } from "@mui/material";
 import React from "react";
 
-function SearchField({ fields, setFields }) {
+function SearchField({ filter, updateData }) {
   return (
     <TextField
       variant="standard"
-      value={fields.search}
-      onChange={(e) => setFields({ ...fields, search: e.target.value })}
+      value={filter.name}
+      onChange={(e) => updateData("name", e.target.value)}
       InputProps={{
         disableUnderline: true,
       }}

components/doctors/search/index.js

@@ -8,9 +8,11 @@ import SearchField from "./SearchField";
 function SearchBar({
   data,
   fields,
+  filter,
   setData,
-  setFields,
+  setFilter,
   setDoctors,
+  updateData,
   matchedCity,
   matchedState,
   confirmedData,
@@ -25,8 +27,11 @@ function SearchBar({
     >
       <FilterModal
         data={data}
+        filter={filter}
         setData={setData}
+        setFilter={setFilter}
         setDoctors={setDoctors}
+        updateData={updateData}
         matchedCity={matchedCity}
         matchedState={matchedState}
         confirmedData={confirmedData}
@@ -48,7 +53,7 @@ function SearchBar({
           </div>
         </Button>
       </FilterModal>
-      <SearchField fields={fields} setFields={setFields} />
+      <SearchField filter={filter} updateData={updateData} />
       <SendReq
         fields={fields}
         setDoctors={setDoctors}