Front-end problem, the page doesn’t refresh something wrong with react dom

I’m making this website and its a clone of amazon. i want my code to go to the other page just by clicking for my case i want it to go to the checkout page when i press in the baskeT, go back from that page just by clicking on the logo

i wanted to use react-dom for this. I mean at fist everything seemed fine then i wanted to add the moving around the page just by clicking on pictiures but it doesn’t loading on its own

I tried to the basket too it does the same so in the browser link i see that it changes back to other page but for me i have to press refresh manually how can i just make it refresh the page without just by clicking on the logos

this is app.js

import React from 'react';
import './App.css';
import Header from './Header';
import Home from './Home';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Checkout from './Checkout';

function App() {
  return (
    <Router>
      <div className="app">
        <Header />

        <Switch>
          <Route path="/checkout">
            <Checkout />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

import React from 'react';
import './Header.css';
import SearchIcon from '@mui/icons-material/Search';
import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket';
import { Link } from 'react-router-dom';

function Header() {
  return (
    <div className="header">
      <Link to="/">
        <img
          className="header__logo"
          src="https://pngimg.com/uploads/amazon/amazon_PNG11.png"
          alt="Amazon Logo"
        />
      </Link>
      <div className="header__search">
        <input className="header__searchInput" type="text" />
        <SearchIcon className="header__searchIcon" />
        {/* Logo */}
      </div>

I feel like problem is between these but if someone needs more of the project ill be happy to share