How to create a search context in React?

Create SearchForm component then import and use before the closing div in components/nav/Main.js

// context/search.js
import { useState, createContext, useContext } from "react";

const SearchContext = createContext();

const initialState = {
  address: "",
  action: "Buy",
  type: "House",
  price: "",
  priceRange: [0, 1000000],
  results: [],
  page: "",
  loading: false,
};

const SearchProvider = ({ children }) => {
  const [search, setSearch] = useState(initialState);

  return (
    <SearchContext.Provider value={[search, setSearch, initialState]}>
      {children}
    </SearchContext.Provider>
  );
};

const useSearch = () => useContext(SearchContext);

export { useSearch, SearchProvider };

// components/forms/SearchForm.js
import { useSearch } from "../../context/search";

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

  return (
    <div className="d-flex justify-content-center">
      {JSON.stringify(search)}
    </div>
  );
}

// Home.js
<SearchForm />