react router return Uncaught runtime errors

Question

i want to make simple navbar ,i read react router documentation.i think my code is correct,but it return these error :

my app code:

import './App.css';
import Dashboard from './component/dashboard';
import Home from './component/home';
import Navbar from './component/navbar';
import {BrowserRouter as Router,Routes,Route} from "react-router-dom"
function App() {
  return (
    <div className="App">
      <Navbar/>
      <div id="body">
      <Router >
        <Routes>
          <Route path="/"  element={<Home/>}/>
          <Route path="/dashboard"  element={<Dashboard/>}/>
        </Routes>
      </Router>
      
      </div>
    </div>
  );
}

export default App;

my navbar code :

import { NavLink } from "react-router-dom"
export default function Navbar(){


    return(<div className="App-header">
    <div id="logo">
      <p>logo</p>
      </div>
      <div id="nav_bar">
        <NavLink  to="/dashboard">dashboard</NavLink>
      </div>
      <div id="cantact_slide">
        <p>contact</p>
      </div>
</div>)
}

I installed react-router-dom: "^6.11.2",nodejs : v18.16.0