How to setup the route for the individual product page in my ecommerce site in react? Route id is undefined

Question

I am creating a Ecommerce website in which I want to create a separate product page for my each product. I have used the props & map in react to do it. But the major problem is for setting the route for the each id. I want that whenever I click on any product it's product page should be visible also it's id should be shown in the route. But the route is "http://localhost:5173/product/undefined" instead of "http://localhost:5173/product/1" what should I do to get the product page based on the id.

I am providing with the complete code of Product.jsx, ProductPage.jsx & App.jsx.

The below is the code of the page where all the product card is given file name is Product.jsx:-

import detail from "./detail";
import { Link } from "react-router-dom";
import productData from "../../../ProductPage/productData";

import "./product.scss";

function Entry(props) {
  return (
    <>
      <Link to={`/product/${props.id}`} key={props.id} className="entry-container">
        <div className="entry-image">
          <img src={props.image} alt="Product Image" />
          <div className="entry-name">
            <p>{props.name}</p>
            <div className="entry-price">
              <p>{props.price}</p>
            </div>
          </div>
        </div>
      </Link>
    </>
  );
}

function Product(props) {

  return (
    <>
      <div className="product-entry">

        {detail.map((details) => (
          <Entry
            key={details.id}
            image={details.image}
            name={details.name}
            price={details.price}
            rating={details.rating}
          />
        ))}

        </div>

      <div className="flex justify-center">
        <button className="w-150 h-10 bg-red-700 text-white rounded-lg py-2 px-4 font-medium text-uppercase cursor-pointer hover:bg-red-900 focus:outline-none active:bg-green-800 mt-5">
          View All Products
        </button>
      </div>
    </>
  );
}

export default Product;

This is the output of Product.jsx

The second code block is the separate product page of each product ProductPage.jsx:-

import "./productPage.scss";
import productData from "./productData";
import { useParams } from "react-router-dom";


function Page(props) {
  return (
    <>
      <div key={props.id} className="page-container">
        <div className="page-image">
          <img src={props.image} alt="Product Image" />
          <div className="page-name">
            <p>{props.name}</p>
            <div className="page-price">
              <p>{props.price}</p>
              <div className="page-rating">
                <p>{props.rating}</p>
              </div>
              <div className="page-detail">
                <p>{props.detail}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function ProductPage() {

    const { id } = useParams();
    console.log(id);

    const product = productData.find((product) => product.id === id);  

  return <>
    <div className="product-page">
        {product && (
          <Page
            key={product.id}
            image={product.image}
            name={product.name}
            price={product.price}
            rating={product.rating}
            detail={product.detail}
          />
        )}
        {!product && <p>Product not found.</p>}

        {console.log("Extracted ID from URL:", id)}
      </div>
  </>;
}

export default ProductPage;

When I click any product its route is undefined. ** App.jsx code:-**

import "./App.css";

import Navbar from "./components/Navbar/Navbar";
import Home from "./components/Home/Home";
import Footer from "./components/Footer/Footer";
import Signin from "./components/Signin/Signin";
import About from "./components/About/About";
import { Routes, Route } from "react-router-dom";
import Contact from "./components/Contact/Contact";
import ProductPage from "./components/ProductPage/ProductPage";
import Product from "./components/Home/Home_component/product/Product";

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Product />} />
        <Route path="/signin" element={<Signin />} />
        <Route path="/product/:id" element={<ProductPage />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
      <Footer />
    </>
  );
}

export default App;

I want that each page should have it's separate product page route as per it id. Please help me with this problem.