Nested Path Params in React Router not working properly

console.log(comments);

// post.$postId.tsx
function PostComponent() {
    const postId = Route.useParams().postId;
    const { data: post } = useSuspenseQuery(postQueryOptions(postId));

    return (
        <div className="space-y-2">
            <h4 className="text-xl font-bold underline">{post.title}</h4>
            <div className="text-sm">{post.body}</div>
            <Link
                className="font-bold text-blue-500"
                params={{
                    postId: post.id,
                }}
                to={'/posts/$postId/comments'}
            >
                Show comments for post: {postId}
            </Link>
        </div>
    );
}
// post.$postId.comments.tsx
loader: ({ context: { queryClient }, params: { postId } }) => {
        return queryClient.ensureQueryData(commentsQueryOptions(postId));
    },

const { postId } = Route.useParams();
    const { data: comments } = useSuspenseQuery(commentsQueryOptions(postId));
console.log(comments);