React routing issue - URL in browser does change but data doesn't load

Question

I've tried to set up routing, but as stated in title URL in browser does change but data doesn't load.

My App.js is defined as:

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import React from 'react';
import Navbar from './components/Navbar';
import Addbook from './components/Addbook';
import Listbook from './components/Listbook';

function App() {
  return (
    <Router>
      <div>
        <Navbar />
        <Switch>
          <Route exact path="/book/add">
            <Addbook />
          </Route>
          <Route exact path="/book/list">
            <Listbook />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

In Navbar I declared it as:

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

<ListItem
  button
  selected={selectedSection === 'Books'}
  onClick={() => handleSectionSelect('Books')}
>
  <ListItemIcon>
    <BookIcon />
  </ListItemIcon>
  <ListItemText primary="Books" />
  </ListItem>
    {selectedSection === 'Books' && (
      <>
        <ListItem button component={Link} to='/book/add'>
          <ListItemIcon>
            <BookmarkAddIcon />
          </ListItemIcon>
          <ListItemText primary="Add Book" />
        </ListItem>
        <ListItem button component={Link} to='/book/list'>
          <ListItemIcon>
            <ManageSearchIcon />
          </ListItemIcon>
          <ListItemText primary="Manage Books" />
        </ListItem>
      </>

I've tried to omit Switch, declare routes other ways. Adding refreshonClick as action to button. However none of it works.