React Link changes the URL path but does not load the page automatically

Question

I'm using Link to load my detail component by a specific id which i get from firebase but when i click on it, it,ll update the URL but doesn't load the page automatically however I'm able to load it manually by refreshing the page myself.

here's my Movies.js component:

    

  return (
    <Container>
        <h4>Recommended for You</h4>
        <Content>
            { movies &&
                movies.map((movie) =>(
                <Wrap key={movie.id} >
                <Link  to={`/detail/${movie.id}`}>
                    <img src={movie.cardImg} />
                    </Link>
                </Wrap>
                ))
            }
        </Content>
    </Container>
  )
}

export default Movies

and my app.js :

import React from 'react';
import logo from './logo.svg';
import { Counter } from './features/counter/Counter';
import './App.css';
import Header from './components/Header';
import Home from './components/Home';
import Detail from './components/Detail';
import Login from './components/Login';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <div className="App">

      <Router>
      <Header />
      <Switch>
      <Route path="/login">
          <Login />
      </Route>
        <Route path="/detail/:id">
          <Detail />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
      </Router>
    </div>
  );
}


export default App;