I have used all the solutions i found but still getting same error. my react-router-dom is v6.0.0 and I'm using the latest react version.

import React from "react";
import TopNav from "./TopNav/TopNav";
import logo from "../assets/logo.png";
import styles from "./LandingPage.module.css";
import SearchBar from "../SearchBar/SearchBar";
import SearchSuggestions from "./SearchSuggestions/SearchSuggestions";
import { useNavigate } from "react-router-dom";

export function LandingPage() {
  const Navigate  = useNavigate();

  function search(term, location) {
    const urlEncodedTerm = encodeURI(term);
    const urlEncodedLocation = encodeURI(location);
    Navigate.push(
      `/search?find_desc=${urlEncodedTerm}&find_loc=${urlEncodedLocation}`
    );
  }

  return (
    <div className={styles.landing}>
      <div className={styles["search-area"]}>
        <TopNav />
        <img src={logo} className={styles.logo} alt="logo" />
        <SearchBar search={search} />
        <SearchSuggestions />
      </div>
    </div>
  );
}

export default LandingPage;