Card returns Undefine

I'm trying to create a reusable component by using useparams however i cannot pass the id since it always say undefined

im not really sure whats wrong since idk why the values aren't being passed, this is my first time with routing so any help is appreciated thanks a lot

card.jsx

import React from 'react';
import { useNavigate, Link} from 'react-router-dom';



const Card = (props) => {

 console.log(props.title)


  return (
    <div>
      <h2>{props.id}</h2>
      <h2>{props.title}</h2>
      <p>{props.price}</p>
      <Link to={`/cards-details/${props.id}`}>
              <p>Buy Now</p>
            </Link>
    </div>
  );
}

export default Card;  

cardDetails.jsx

import React from 'react';
import { useParams } from 'react-router-dom';
import cardData from './cardData';


function CardDetails(props) {
  const {id} = useParams()
  console.log(props.key)
  
  const selectedCard = cardData.find(card => card.id === id);
  return (
    <div>
        
      <h1>{id}</h1>
      
    </div>
  );
}

export default CardDetails;

cardwrapper.jsx

import React, { useState } from 'react';
import Card from './Card';
import CardDetails from './CardDetails';

function CardWrapper({ cards }) {
 

  return (
    <div className='grid grid-cols-4 place-items-center'>
      {cards.map(card=> (
        <Card key={card.id} title={card.title} price={card.price} />
      ))}
    </div>
  );
}

export default CardWrapper;

app.jsx

function App() {
  const [open, setopen] = useState(true)

  return (
    <>
   
    <div className="">
    
     <Router>
      { open &&
       <>
       <Banner />
          <Navbar />  
       </>
      }
        <Routes>
          <Route path='/' element={<Home funcNav={setopen}/>}/>
          <Route path='/auth' element={<Auth funcNav={setopen}/>}/>
          <Route path='/cart' element={<Cart />}/>
          <Route path='/sale' element={<All />}/>
          <Route path='/about' element={<About />}/>
          <Route path='/faq' element={<Faq />}/>
          <Route path ='/register' element={<Register />}/>
          <Route path = "/cards-details/:id" element={<CardDetails/>}/>
             
          
  
          
        </Routes>
      </Router>
    </div>
    </>
  )
}

export default App

Change this:

<Card 
  key={card.id} 
  title={card.title} 
  price={card.price} />

to this (it's missing the id):

 <Card 
  key={card.id} 
  id={card.id} 
  title={card.title} 
  price={card.price} />