i am trying to make a detail view of the projects but when i filter data to get the project that i clicked on it dosent work, when i console out projectData and projectId they come out perfectly when i use const project = ProjectData.find((project) => project.id === projectId) project comes out as undefined.

import React, {useState} from 'react'
import { Link, useParams } from 'react-router-dom'
import { ProjectData } from '../data/ProjectData';



const ProjectDetail = () => {
  const { projectId } = useParams()
  const project = ProjectData.find((project) => project.id === projectId)

  const {description, title, path, label, image, alt, beds, baths, area} = project


  return (
    <div>
      <div>
        <h1>{project.title}</h1>
      </div>
    </div>
  )
}

export default ProjectDetail