I am having Dynamic Routing Problem in Next 13 when implementing a threads clone

Question

I've been following a Tutorial of Javascript Mastery of Threads clone.

He implements the dynamic routing feature of next js to implement the profile page app/(root)/profile/[id]/page.tsx

now he has two ways of redirecting to the profile page either using the Nav Bar or clicking on someone's picture in the post. Now if we use the latter method of clicking the Picture we are successfully receiving the parameters of the user ID on the page.tsx file, but we aren't able to get the user ID when using the profile tab on the navbar, it redirects to localhost:3000/profile URL which contains nothing resulting in error 404.

here's the initial code of the file

import ProfileHeader from "@/components/shared/ProfileHeader";
import { fetchUser } from "@/lib/actions/user.actions";
import { currentUser } from "@clerk/nextjs";
import { redirect } from "next/navigation";
async function Page({ params }: { params: { id: string } }) {
    
  const user = await currentUser();
  if (!user) return null;

  const userInfo = await fetchUser(params.id);
  if (!userInfo?.onboarded) return redirect("/onboarding");

  

For complete code till now refer to my repo: https://github.com/dipesh2508/circles