**App.js**

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

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

export default App;

checkout.js

import React from 'react';
import "./Checkout.css";
import CheckoutProduct from "./CheckoutProduct.js";
import Subtotal from "./Subtotal.js";

function Checkout() {
  return (
    <div className="checkout">
      <div className="checkout__left">
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSlDIcv46GCe2DRvW-CmLDn5LHyORLkJo8isA&usqp=CAU" alt="" className="checkout__add" />
      <div>
        <h2 className="checkout__title">
          your Shopping Basket
        </h2>
        <CheckoutProduct />
      </div>
      </div>
      <div className="checkout__right">
      <Subtotal />
      </div>
    </div>
  )
}

export default Checkout

I am expecting after routing to checkout component it should display all the content written inside it. but I am only seeing blank screen.(I am following the same code structure from the Udemy video)