Why i have an error when rendering components outside router?

Question

In my App.js i want to render a Navbar component and a Sidebar component, and below i have my routes. So that the only content of my page that changes are the components being rendered by the different routes.

App.js:

import './App.css';
import Login from './atoms/Login';
import { BrowserRouter , Routes, Route } from 'react-router-dom';
import { useContext } from 'react';
import LoginContext from './LoginContext';
import Contact from './pages/Contact';
import Search from './pages/Search';
import Main from './templates/Main';
import Dashboard from './pages/Dashboard';
import Navbar from './organisms/Navbar';
import Sidebar from './organisms/Sidebar';

function App() {
  const {isLoggedIn} = useContext(LoginContext);
  console.log(isLoggedIn);
  return (    
      <div>
        <Navbar/>
        <Sidebar/>
      
        <BrowserRouter>
        <Routes>
          <Route path="/" element={isLoggedIn ? <Dashboard/> : <Login />}/>
          <Route path="/contact" element ={<Contact/>}/> 
          <Route path="/search" element ={<Search/>}/>       
        </Routes>
        </BrowserRouter>
      </div>
    );
}

export default App; 

On my console i have the following error message:

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