React Routes not routing correctly v6

I’m trying to get the routing to work correctly but whenever I click on my navbar component it does not properly go to the component that’s supposed to be rendered by the Route.

There are no errors indicated by React. Just super stuck right now.

import React from 'react';
import Navbar from './components/Navbar';
import Home from './components/Home.js';
import BlankPage from './components/BlankPage';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';

function App() {
  return (
    <>
      <Router>

      <Navbar/>

      <Routes>
        <Route path="/" component={Home}/>
        <Route path="/blankpage" component={BlankPage}/>
      </Routes>

    </Router> 
    </>
  );
}

export default App;