URL is updating but page is not redirecting in react

Here in my project I am trying to redirect to checkout page by clicking on cart icon. The url is getting updated but it’s not redirecting to the new page

version of react-router-dom: “5.2.0”,
version of react 18.2.0
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';
// import {Link}  from "react-router-dom";


function App() {
  return (
    <Router>
    <div className="app">
    <Header />
      <Switch>
      <Route exact path="/checkout">
      <Checkout />
      </Route>
        <Route exact path="/">
        <Home />
      
      </Route>
      
      </Switch>
    </div>
    </Router>
  );
}

export default App;

Here is my Header.js file

import React from 'react'
import './Header.css'
import SearchIcon from '@mui/icons-material/Search';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import { BrowserRouter, Link } from 'react-router-dom';
import { useStateValue } from './StateProvider';



function Header() {
  const [{basket},dispatch]=useStateValue();
  return (
    <div className='header'>
      <Link exact to='/'>
      <img className='header__logo' src="assets/logo.png"></img>
      </Link>
      
        <div className='header__search'>
            <input className='header__searchInput' type='text'/>
            <SearchIcon className='header__searchIcon'/>
            </div>
        <div className='header__nav'>
            <div className='header__option'>
              <span className='header__optionLineOne'>Hello Guest</span>
              <span className='header__optionLineTwo'>Sign In</span>
            </div>
            <div className='header__option'>
            <span className='header__optionLineOne'>Returns</span>
              <span className='header__optionLineTwo'>& Orders</span>
            </div>
            <div className='header__option'>
            <span className='header__optionLineOne'>Your</span>
              <span className='header__optionLineTwo'>Prime</span>
              </div>
             
              <Link to="/checkout">
              <div className='header__optionBasket'>
            <ShoppingCartIcon />
            <span className='header__optionLineOne header__basketCount'>
              {basket?.length}
            </span>
          </div>
          </Link>
          
         
        </div>
    </div>
  );
}

export default Header

Previously there is no exact but after some browsing in stack overflow I added exact but still no use

Route exact path="/checkout">
      <Checkout />
      </Route>
        <Route exact path="/">
        <Home />
      
      </Route>