everyone. Im having trouble to access the id that from the dynamic page in Next.js in the Edit project page. This is my folder

I have this component so I can navigate to the Edit project page

"use client";

import Image from "next/image";
import { Button } from "../ui/button";
import { useRouter } from "next/navigation";

interface EditProjectProps {
  editProjectId: string;
}
export const EditProject = ({ editProjectId }: EditProjectProps) => {
  const router = useRouter();

  const editProject = () => {
    //Go to Edit project page
    router.push(`/user/projects/${editProjectId}`);
  };
  return (
    <Button variant="ghost" onClick={editProject}>
      <Image
        src="/images/EditIcon.png"
        alt="Edit Icon"
        width={20}
        height={20}
      />
    </Button>
  );
};

Till now everything its okay this is the Url that appears after navigating user/projects/669120f48be2051c82f359c3
Now how can I access the id from the url to the page cause I need it to call and api to fetch the data project for this id. I have been using router.query but im having an error

 const { editProjectId } = router.query;

Property 'query' does not exist on type 'AppRouterInstance'

Thank you I hope you will help me!