Error: useHref() may be used only in the context of a <Router> component

Question

**When i Write my My Nav Bar Component Content Directly in My Router Component. It works Fine But When I write that content in a NavBar Component it Generates the following error

Error: useHref() may be used only in the context of a component. .**

Im Using "react-dom": "^17.0.2", "react-router-dom": "^6.0.0-beta.6",

Following are my Components..

My NavBar Component:-

import { Link } from "react-router-dom";
// import styles from './NavBar.module.css';
export const NavBar = () => {
  return (
      <nav>
        <Link to="/"> Home </Link>
        <Link to="/about"> About </Link>
        <Link to="/product"> Product </Link>
      </nav>
  );
}

My Route Component:-

import { BrowserRouter as Router, Switch, Route, Routes} from "react-router-dom";

// importing Component's
import { Home } from "./Components/Home/Home";
import { About } from "./Components/About/About";
import { Products } from "./Components/Products/Products";
import { ProductItems } from "./Components/ProductItems/ProductItems";
import  {NavBar}  from "./Components/NavBar/NavBar";
import { Fotter } from "./Components/Fotter/Fotter";

export const RouterConfig = () => {
  return (
    <Router>
      <NavBar />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route exact path="/product" component={Products} />
        <Route path="/product/:id" component={ProductItems} />
        <Route path="*" component={() => <h2>404 Not Found </h2>} />
      </Switch>
      {/* <Fotter />' */}
    </Router>
  );
};