CSS modules are "undefined" on navigation bar that uses react-router-dom - reactjs

Question

I'm making a react app that had a successful navigation bar built on react-router. I used CSS modules to compartmentalize the styling which helped. I messed around with React-PDF and after having removed it from my code, my navigation bar now no longer displays properly. It only displays one link and on dev tools, the CSS for the navigation bar and components within it are "undefined". I'd like to know how to revert this back to normal.
Below is my code.
Nav.js
import React from 'react';
import { BrowserRouter as NavLink } from 'react-router-dom';
import navstyles from './navstyles.module.css';
function Nav() {
return (
<div>
<nav className={`${navstyles.navbar}`}>
<h2 className={`${navstyles.navboxhome}`}>
<NavLink
exact to="/"
activeStyle={{
fontWeight: "bold",
color: "blue"
}}
>
Home
</NavLink>
</h2>
<h2 className={`${navstyles.navboxstories}`}>
<NavLink
exact to="/stories"
activeStyle={{
fontWeight: "bold",
color: "blue"
}}
>
Stories
</NavLink>
</h2>
<h2 className={`${navstyles.navboxcontact}`}>
<NavLink
exact to="/contact"
activeStyle={{
fontWeight: "bold",
color: "blue"
}}
>
Contact
</NavLink>
</h2>
</nav>
</div>
);
};
export default Nav;
navstyles.module.css
.navbar {
display: grid;
width: 100%;
height: 10vh;
grid-template-columns: repeat(3, 1fr);
}
[class^="navbox"] {
background-color: greenyellow;
border-radius: 1px;
border-color: black;
border: 2px;
border-style: solid;
display: grid;
/* To place the letter at the center */
place-items: center;
}
.navboxhome {
background-color: skyblue;
display: grid;
place-items: center;
}
.navboxstories {
background-color: skyblue;
display: grid;
place-items: center;
}
.navboxcontact {
background-color: skyblue;
display: grid;
place-items: center;
}
App.js
import './App.css';
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Nav from './Components/Nav';
import Footer from './Components/Footer';
import Stories from './Pages/Stories';
import Contact from './Pages/Contact';
function App() {
return (
<Router>
<div className="container">
<div className="navigation">
<Nav />
</div>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/stories" exact component={Stories} />
<Route path="/contact" exact component={Contact} />
</Switch>
<div className="bottom">
<Footer />
</div>
</div>
</Router>
);
}
const Home = () => (
<div className="subcontainer">
<div className="box-2">B</div>
<div className="box-3">C</div>
<div className="box-4">D</div>
<div className="box-5">E</div>
<div className="box-6">F</div>
</div>
);
export default App;

Answer 1

In nav.js, replace the
import { BrowserRouter as NavLink } from 'react-router-dom';
with
import { NavLink } from 'react-router-dom';
Because BrowserRouter is not used to create a link, instead it is used to wrap your application so that you can use navigation component in react-routed-dom (eg. NavLink or Link).
https://reactrouter.com/web/api/BrowserRouter