add auto-selecotr to home page and handle set in data, search in specialties and send req for filter && add locations and change text

components/searchHead/smSearch/AutoCompleteSearch.js

@@ -20,9 +20,15 @@ function AutoCompleteSearch({
         handleSearch(newInputValue);
       }}
       onChange={(event, newValue) => {
-        setSelectedOption(newValue);
+        setSelectedOption && setSelectedOption(newValue);
         handleSearch(newValue ? newValue.name : "");
       }}
+      renderOption={(props, option) => (
+        <li {...props} key={option.id}>
+          {" "}
+          {option.name}
+        </li>
+      )}
       sx={{
         "& .MuiAutocomplete-input": {
           background: "#ffffff !important",

components/searchHead/smSearch/index.js

@@ -5,7 +5,6 @@ import AutoCompleteSearch from "./AutoCompleteSearch";
 
 function SmSearch({ placeholder, handleSearch, data }) {
   const [inputValue, setInputValue] = useState("");
-  const [selectedOption, setSelectedOption] = useState(null);
 
   return (
     <ButtonGroup
@@ -20,7 +19,6 @@ function SmSearch({ placeholder, handleSearch, data }) {
         placeholder={placeholder}
         handleSearch={handleSearch}
         setInputValue={setInputValue}
-        setSelectedOption={setSelectedOption}
       />
       <Button
         onClick={() => handleSearch(inputValue)}