React router dom 5.3.0 : Main content is not being rendered in new paths that is being returned by a Route file

Question

I am following this tutorial to create an Ecommerce website, React & Node Tutorial For Absolute Beginners - Build & Deploy ECommerce Website in 9 Hours

I am Stuck at Part 08- Build Product Screen

I have followed the tutorial to the t, but when my app goes to http://localhost:3000/products/1, it only shows the header and footer as they are outside the route. None of the content and the product information page elements get rendered. I have been looking for 5 hours. It’s 5 am now and this is my last attempt at this, please help me out asap

Link to my github repo

I changed <Route path="/product/:id" component={ProductScreen} />to <Route path="/" component={ProductScreen} /> and commented out the Homescreen Route and it showed me the contents of the ProductScreen just fine

Here is a preview of my package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.3.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

App.js

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Header from "./Components/Header";
import Footer from "./Components/Footer";
import HomeScreen from "./Screens/HomeScreen";
import ProductScreen from "./Screens/ProductScreen";

function App() {
  return (
    <BrowserRouter>
      <div className="grid-container">
        <div className="overlay" data-overlay></div>

        {/* MODAL */}

        {/* NOTIFICATION TOAST */}

        {/* HEADER */}

        <Header></Header>

        {/* MAIN */}

        <main>
          <div className="content">
            <Route path="/product/:id" component={ProductScreen} />
            <Route path="/" exact={true} component={HomeScreen} />
          </div>
        </main>

        {/* FOOTER */}
        <Footer></Footer>
      </div>
    </BrowserRouter>
  );
}

export default App;

And Product Screen

import React from "react";
import Rating from "../Components/Rating";
import data from "../data";

export default function ProductScreen(props) {
  const product = data.products.find((x) => x.id === props.match.params.id);
  if (!product) {
    return <div> Product Not Found</div>;
  }
  return (
    <div className="product-screen">
      <div className="container">
        <div className="product-screen-container">
          <div className="product-gallery">
            <img src={product.image1} alt={product.name} />
            <img src={product.image2} alt={product.name} />
            <img src={product.image1} alt={product.name} />
            <img src={product.image2} alt={product.name} />
            <img src={product.image1} alt={product.name} />
            <img src={product.image2} alt={product.name} />
          </div>

          <div className="product-info-action">
            <div className="product-info">
              <h2>{product.category}</h2>
              <h1>{product.name}</h1>
              <h2>
                Rs.{product.price}
                <Rating>
                  rating={product.rating}
                  numReviews={product.numReviews}
                </Rating>
              </h2>
              {/* Description:
                    <p>{product.description}</p> */}
            </div>

            <div className="product-action">
              <button>Create Custom Size</button>
              <button>Customize</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}