I am trying to access a parameter in the layout, but it is returning undefined. The same approach works fine in a page. Could you please guide me on how to properly retrieve this value in the layout? Also, what would be the best approach to achieve this?

export default function ChatLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { id?: string };
}) {
  console.log("[params ==============>]", params.id); // here it is undefine if url is chat/123
  return (
    <main className={urbanist.className}>
      <Navbar />
      <div className="p-6">
        <div className="grid grid-cols-12">
          <div className="col-span-2">
            <div className="grid gap-4">
              <h1 className="font-medium text-3xl">Messages</h1>
              <Input
                fullWidth
                placeholder="Search"
                size="sm"
                radius="lg"
                startContent={
                  <Image
                    width={24}
                    height={24}
                    alt="searchIcon"
                    className="w-6 h-6"
                    src="/icons/searchIcon.svg"
                  />
                }
              />
              <ConversationList
                conversations={[
                  {
                    id: 1,
                    is_seen: true,
                    name: "Umer",
                    last_message: {
                      body: ".k",
                      created_at: "16:45",
                      receiver_id: 5,
                    },
                    profile_image: dummyImageUrl,
                  }
                ]}
              />
            </div>
          </div>
          <div className="col-span-10">{children}</div>
        </div>
      </div>
    </main>
  );
}