React Router works only on refresh

I have a very basic setup in App.js

import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { Navbar } from './components';
import { Home, Login, Signup } from './pages';
import './App.css';

function App() {
  return (
    <>
      <BrowserRouter>
        <Navbar />
        <Switch>
          <Route path="/" exact>
            <Home />
          </Route>
          <Route path="/signup">
            <Signup />
          </Route>
          <Route path="/login">
            <Login />
          </Route>
        </Switch>
      </BrowserRouter>
    </>
  );
}

export default App;

Navbar component looks like this.

import { Link } from "react-router-dom";

export const Navbar = () => {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/login">Login</Link>
      <Link to="/signup">Signup</Link>
    </nav>
  );
};

The Home, Login and Signup components are returning simple h2 for now. For some reason, when I click one of the Navbar links, the correct component doesn't render until I refresh the page.

I have installed react-router-dom 5.1. What am I missing?