React Router Dom Dynamic linking gives wrong data

I’m trying to make a dynamic project page using react router dom v6, using params gives the right id in console, but the project displayed is wrong, heres an example:

example of displaced data

The “id: 7” is the project one and wrong, but the “6” below is the params id which is the correct one.

Here’s the project page code:

export function ProjectPage() {
  const {projectId} = useParams();
  const project = filterData[projectId]
  const {title, mediaUrl} = project;
  console.log(project, projectId)

  return (
    <div className={"project-page-body"}>
      <div className={"project-page-title"}>
        <h1 className={"project-item-title"}>{title}</h1>
        <p className={"description"}>
          Lorem ipsum filler text for project description.
        </p>
      </div>
      <div className={"project-page-image"}>
          <img src={mediaUrl} style={{width: "80vw", height: "auto" }}/>
      </div>
    </div>
  );
}ยดยดยด