React App does not re-render when clicked into a NavLink. The URL changes, but the page does not

This is the App.js file

import './App.css';
import {BrowserRouter, Route, Switch, NavLink} from 'react-router-dom'
import Home from './pages/Home.js'
import About from './pages/About.js'
import Contact from './pages/Contact.js'

function App() {
  return (
    <div className="App">
    <BrowserRouter>
      <h1>brruh</h1>
      <nav>
        <NavLink exact to="/">Home</NavLink>
        <NavLink to="/about">About</NavLink>
        <NavLink to="/contact">Contact</NavLink>
      </nav>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
        <Route path="/contact" component={Contact}/>
      </Switch>
    </BrowserRouter>
    </div>

  );
}
export default App;

And this is the index.js file

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

I tried reinstalling the react-router-dom package, however the problem still persists.
If I manually access the other pages (about and content), they show up.
Or if I click on the About page link and then refresh the page, the About page shows up.
However, those pages do not show up without page refreshing but the URL does change