I'm trying to display a dynamic segment of [id] of posts when I click on a single Link to a specific post, on the same page.
So Posts List and Selected Post will be on the same page
(Something like Outlets in react-router-dom)

But I don't really know how to.
I tried to use search params but it doesn't feel right.

page.tsx (/posts)

import Post from "@/components/Post";
import PostsList from "@/components/PostsList";

export default function PostsPage({
  searchParams,
}: {
  searchParams: { post?: string };
}) {
  return (
    <div className="flex">
      <div className="flex-1">
        <p>searching for Post: {searchParams.post}</p>
        <PostsList />
        <Post id={searchParams.post ?? ""} />
      </div>
    </div>
  );
}

PostsList.tsx

import { createClient } from "@/utils/supabase/server";
import Link from "next/link";

export default async function PostsList() {
  const supabase = createClient();
  const { data: posts } = await supabase.from("posts").select("id,title");

  return (
    <div>
      <h1>Posts List</h1>
      <ul>
        {posts?.map((post) => (
          <Link key={post.id} href={`/posts?post=${post.id}`}>
            Post: {post.id}
          </Link>
        ))}
      </ul>
    </div>
  );
}

Post.tsx

import { createClient } from "@/utils/supabase/server";
export default async function Post({ id }: { id: string }) {
  const supabase = createClient();

  const { data: post } = await supabase
    .from("posts")
    .select("*")
    .eq("id", id)
    .single();

  return (
    <div>
      <h1>Post</h1>
      <p>title: {post?.title}</p>
      <p>id: {post?.id}</p>
      <p>is_done: {post?.is_done ? "Yes" : "No"}</p>
    </div>
  );
}