React js 18.0 Router changes URL but not loading the page

I have a problem, I’m using reactJS V18.0, BrowserRouter, Link and Switch to manage my website routing, my problem is that when I click on a link it changes on URL but not in view, however when I refresh the page it works.

This is my App.js page:

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

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

          <Route path='/checkout'>
            <Checkout />
          </Route>

          <Route path='/'>
            <Home />
          </Route>

        </Switch>
      </div>
    </Router>
    
    

  );
}

export default App;

This is my Header.js page:

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='No-pic'/>
        </Link>
    </div>
  )
}

export default Header

This is my Home.js page:

import React from 'react'
import './Home.css'
import Product from './Product'

function Home() {
  return (
    <div className='home'>
        <div className='home__container'>
            <img className='home__image' src='https://m.media-amazon.com/images/I/61mO1fbqd6L._SX3000_.jpg' alt=''/>
            <div className='home__row'>
                <Product 
                    id="123456"
                    title='The 7 Habits of highly effective people' 
                    price={29.99} 
                    image='https://images-na.ssl-images-amazon.com/images/I/51gq0SK0IUL._SX323_BO1,204,203,200_.jpg'
                    rating={5}/>
                <Product 
                    id="654321"
                    title='Sony PlayStation 5 Édition Standard' 
                    price={299.99} 
                    image='https://m.media-amazon.com/images/I/51zylG5gxfS._AC_SX679_.jpg'
                    rating={4}/>
            </div>
            <div className='home__row'>
                <Product 
                    id="654321"
                    title='Sony PlayStation 5 Édition Standard' 
                    price={299.99} 
                    image='https://m.media-amazon.com/images/I/51zylG5gxfS._AC_SX679_.jpg'
                    rating={4}/>
                <Product 
                    id="123456"
                    title='The 7 Habits of highly effective people' 
                    price={29.99} 
                    image='https://images-na.ssl-images-amazon.com/images/I/51gq0SK0IUL._SX323_BO1,204,203,200_.jpg'
                    rating={5}/>
                <Product 
                    id="654321"
                    title='Sony PlayStation 5 Édition Standard' 
                    price={299.99} 
                    image='https://m.media-amazon.com/images/I/51zylG5gxfS._AC_SX679_.jpg'
                    rating={4}/>
            </div>
            <div className='home__row'>
                <Product 
                    id="654321"
                    title='Sony PlayStation 5 Édition Standard' 
                    price={299.99} 
                    image='https://m.media-amazon.com/images/I/51zylG5gxfS._AC_SX679_.jpg'
                    rating={4}/>
            </div>
        </div>
    </div>
  )
}

export default Home

Thank you a lot in advance for your help.