My current folder structure setup is:

app/
├─ form/
│  ├─ @header/
│  │  ├─ page.tsx
│  ├─ begin/
│  │  ├─ page.tsx
│  ├─ layout.tsx
│  ├─ page.tsx

Inside the layout.tsx of /form is:

export default function Layout({
    children,
    header,
}: {
    children: React.ReactNode;
    header: React.ReactNode;
}) {
    return (
        <>
            {header}
            {children}
        </>
    );
}

If I navigate to /form/begin, I would expect the content of the begin page, as well as @header/page.tsx, but instead I breifly see an empty page and then the 404 page is shown. I may not be using the slots for the right thing, but in this case I would like to render 2 different headers across all pages depening on the progress of the form.
Is this a correct use of slots? If so, why does the 404 page show?