// components/forms/SearchForm.js
import { useSearch } from "../../context/search";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";
import { GOOGLE_PLACES_KEY } from "../../config";

export default function SearchForm() {
  const [search, setSearch] = useSearch();

  return (
    <>
      <div className="container mt-5 mb-5">
        <div className="row">
          <div className="col-lg-12">
            <GooglePlacesAutocomplete
              apiKey={GOOGLE_PLACES_KEY}
              apiOptions={{ region: "au" }}
              selectProps={{
                defaultInputValue: search?.address,
                placeholder: "Search for address..",
                onChange: ({ value }) => {
                  setSearch({ ...search, address: value.description });
                },
              }}
            />
          </div>
        </div>

          <div className="d-flex justify-content-center mt-3">
            <button className="col-lg-2 btn btn-primary">Buy</button>
            <button className="col-lg-2 btn btn-primary">Rent</button>
            <button className="col-lg-2 btn btn-primary">House</button>
            <button className="col-lg-2 btn btn-primary">Land</button>
            <button className="col-lg-2 btn btn-primary">Price</button>
            <button className="col-lg-2 btn btn-danger">Search</button>
        </div>
      </div>

      {JSON.stringify(search, null, 4)}
    </>
  );
}

Create Search page

// pages/Search.js
import SearchForm from "../components/forms/SearchForm";

export default function Home() {
  return <SearchForm />;
}
// App.js
<Route path="/search" element={<Search />} />
// components/nav/Menu.js
<li>
  <NavLink className="nav-link" to="/search">
    Search
  </NavLink>
</li>