useParams and useLocation hook REact router dom

Home.js

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom';
// import About from './About';
import Error from './Error';
import Index from './Index';
import Navbar from './Navbar';
import ProductDetails from './ProductDetails';
import Products from './Products';
export const Home = () => {
    return (
        <div>
            <BrowserRouter>
                <Navbar />
                <Routes>
                    <Route path="/"/>
                    <Route path="/home" element={<Index />} />
                    <Route path="/product" element={<Products />} />
                    <Route path="/product/productdetail/:id" element={<ProductDetails />} />
                    <Route path='/about' element={<Products />} />
                    <Route path='*' element={<Error />} />
                </Routes>
            </BrowserRouter>
        </div>
    )
}
export default Home;

Product.js

import React from 'react'
import { Link } from 'react-router-dom';
import Data from './data';
const products = () => {
    return (
        <>
            {
                Data.map((v) => {
                    return <div className='container'><p>{v.id }</p>
                        <Link to={`productdetail/${v.id}`}><p>{v.title }</p></Link>
                        <p>{v.img }</p>
                        <p>{ v.price}</p><hr /></div>
                })
            }
        </>
    )
}
export default products

ProductDetails.js

import React from 'react'
import { useParams } from 'react-router-dom';
const ProductDetails = () => {
    const myUrl = useParams()
    console.log(myUrl)
    return (
        <>
            <h1>{myUrl.id}</h1>
            <h1>This is product details page</h1>
        </>
    )
}
export default ProductDetails

a