Blank page after wrapping components in react-router v6

I am testing out react-router-dom v6 but facing a constant issue that after wrapping everything up in react-router it’s returning a blank page. I’ve tried with different components but the output is the same.

Navbar.js

import React from 'react'
import * as FaIcons from 'react-icons/fa'
import { Link } from 'react-router-dom'
function Navbar() {
    return (
        <div className='navbar'>
            <Link to='/' className='menu-bars'>
                <FaIcons.FaAirbnb />
            </Link>
        </div>
    )
}

export default Navbar
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

App.js

import { Router, Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar";

export default function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route exact path='/' element={<Navbar />} />
        </Routes>
      </Router>
    </>


  )
}