array.find is not working and getting the error that the values are un defined

I'm getting an error on the product detail page of my e-commerce website. my product data is stored in "Store2.js" in the form of an array and when I'm not destructuring the array in the SingleProd.js component but rather just console logging the data then there's no error but after destructing the products array and storing the values in "title" and "description" variable. then getting an error in the console that those values are undefined

even in the picture attached the object values i.e title and description are showing up despite that getting the error that they're undefined

my Store2.js

import React from "react";
//import Product from "../components/Products";
import Products2 from "../components/Products2";
import "../styles/Store2.css";

export const products2 = [
  {
    id: "1",
    title: "MICELLAR CLEANSING WATER",
    price: 5000,
    imageUrl:
      "https://july.uxper.co/skins/wp-content/uploads/sites/32/2022/06/10961546-6954864240121079-270x350.jpg",
    description: "Our Signature Moisture Restoring Night Cream is similar to our Facial Moisturizer, except it is infused with heavier natural oils to nourish and hydrate the skin while you sleep!",
  },

  {
    id: "2",
    title: "HYDRATING MIST ROSE",
    price: 12000,
    imageUrl:"https://july.uxper.co/skins/wp-content/uploads/sites/32/2022/06/10961550-9294864241342472-270x350.webp",
    description: "Our Signature Moisture Restoring Night Cream is similar to our Facial Moisturizer, except it is infused with heavier natural oils to nourish and hydrate the skin while you sleep!",

  },

  {
    id: "3",
    title: "RESTORING NIGHT CREAM",
    price: 12000,
    imageUrl:
      "https://july.uxper.co/skins/wp-content/uploads/sites/32/2022/06/10961548-1854864240697517-270x350.webp",
    description: "Our Signature Moisture Restoring Night Cream is similar to our Facial Moisturizer, except it is infused with heavier natural oils to nourish and hydrate the skin while you sleep!",

  },

  {
    id: "4",
    title: "FACIAL RECOVERY SERUM",
    price: 12000,
    imageUrl:
      "https://july.uxper.co/skins/wp-content/uploads/sites/32/2022/06/11142350-9734864245383427-270x350.webp",
    description: "Our Signature Moisture Restoring Night Cream is similar to our Facial Moisturizer, except it is infused with heavier natural oils to nourish and hydrate the skin while you sleep!",

  },

  {
    id: "5",
    title: "UBTAN FACEWASH",
    price: 12000,
    imageUrl:
      "https://july.uxper.co/skins/wp-content/uploads/sites/32/2022/06/11142344-4424864244102235-270x350.webp",
    description: "Our Signature Moisture Restoring Night Cream is similar to our Facial Moisturizer, except it is infused with heavier natural oils to nourish and hydrate the skin while you sleep!",

  },

  {
    id: "6",
    title: "RESTORING NIGHT CREAM",
    price: 12000,
    imageUrl:
      "https://july.uxper.co/skins/wp-content/uploads/sites/32/2022/06/11254341-7804864246855026-270x350.webp",
    description: "Our Signature Moisture Restoring Night Cream is similar to our Facial Moisturizer, except it is infused with heavier natural oils to nourish and hydrate the skin while you sleep!",

  },

  {
    id: "7",
    title: "RESTORING ALOEVERA CREAM",
    price: 12000,
    imageUrl:
      "https://july.uxper.co/skins/wp-content/uploads/sites/32/2022/06/12552281-1204864254053631-270x350.webp",
    description: "Our Signature Moisture Restoring Night Cream is similar to our Facial Moisturizer, except it is infused with heavier natural oils to nourish and hydrate the skin while you sleep!",

  },

  {
    id: "8",
    title: "RESTORING TEATREE CREAM",
    price: 12000,
    imageUrl:
      "https://july.uxper.co/skins/wp-content/uploads/sites/32/2022/06/10961550-9294864241342472-270x350.webp",
    description: "Our Signature Moisture Restoring Night Cream is similar to our Facial Moisturizer, except it is infused with heavier natural oils to nourish and hydrate the skin while you sleep!",

  },

];

export default function Store2() {
  return (
    <main className="prod-hold">
      {products2.map((product) => (
        <Products2 key={product.id} product={product} />
      ))}
    </main>
  );
}

SingleProd.js , which is responsible for showing data about an individual product

import React from 'react'
import "../styles/SingleProd.css";
import { useParams } from 'react-router-dom';
import { products2 } from '../pages/Store2';

console.log(products2);

const SingleProd = () => {
  const params=useParams();
  const {id} = params;

  const product=products2.find((product) => product.id === id)
  const {title ,description}=product;

  
  return (
    <div>
      this is single prod page and url id is {id}

      <h1>{title}</h1>

      <h3>{description}</h3>

    </div>
  )
}

export default SingleProd