If I have layout.tsx directly under Route Group, when I execute the notFound function, I get a page that combines the Next.js default not found page and layout.tsx, instead of app/not-found.tsx. How can I get `app/not-found.tsx to show up?

app
├── (main)
|   ├── profile
|   |   └── [id]
|   |       └── page.tsx
|   ├── layout.tsx
|   └── page.tsx
└── not-found.tsx

app/(main)/profile/[id]/page.tsx

import prisma from "@/lib/prisma"
import { notFound } from "next/navigation"

export default async function ProfilePage({
    params
}: {
    params: Promise<{ id: string }>
}) {
    const id = parseInt((await params).id)

    const user = await prisma.user.findUnique({
        where: { id }
    })

    if (!user) notFound()

    return (
        <>
            <p>{user.username}</p>
            <p>{user.email}</p>
        </>
    )
}

app/(main)/layout.tsx

import Link from "next/link"

export default function MainLayout({
    children
}: Readonly<{
    children: React.ReactNode
}>) {
    return (
        <>
            <Link href="/" className="text-6xl">HOME PAGE</Link>
            {children}
        </>
    )
}

app/not-found.tsx

import Link from 'next/link'

export default function NotFound() {
    return (
        <>
            <h2>Not Found</h2>
            <p>Could not find requested resource</p>
            <Link href="/" className="text-blue-500 hover:underline">Return Home</Link>
        </>
    )
}

• When /profile/[id] is accessed and the notFound function is executed, the browser console displays No default component was found for a parallel route rendered on this page. Falling back to nearest NotFound boundary. will be displayed.