Parallel routes from Nextgram example result in 404 on home page

Following the YT tutorial, around hour and 30 minutes in there is a description of parallel routes recommending the https://github.com/vercel/nextgram example. Unfortunately, using the code from this example causes a 404 error.

I'm unsure what is going on. This is my folder structure:

Here's the root layout:

export default function RootLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <ClerkProvider>
      <html lang="en" className={`${GeistSans.variable}`}>
        <NextSSRPlugin routerConfig={extractRouterConfig(ourFileRouter)} />
        <body className="flex flex-col gap-2">
          <TopNav />
          {children}
          {modal}
          <div id="modal-root" />
        </body>
      </html>
    </ClerkProvider>
  );
}

Here's page.tsx in the img/[id]:

export default function PhotoPage({
  params: { id },
}: {
  params: { id: string };
}) {
  return <div className="card">{id}</div>;
}

page.tsx in the @modal/(.)img/[id]:

import { getImage } from "~/server/db/queries";
import { Modal } from "./modal";

export default async function PhotoModal({
  params: { id: photoId },
}: {
  params: { id: string };
}) {
  const idAsNumber = Number(photoId);
  if (Number.isNaN(idAsNumber)) throw new Error("Invalid id");
  const image = await getImage(idAsNumber);
  return (
    <Modal>
      <img src={image.url} className="h-96 w-96" />
    </Modal>
  );
}

and modal.tsx next to it:

"use client";

import { type ElementRef, useEffect, useRef } from "react";
import { useRouter } from "next/navigation";
import { createPortal } from "react-dom";

export function Modal({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const dialogRef = useRef<ElementRef<"dialog">>(null);

  useEffect(() => {
    if (!dialogRef.current?.open) {
      dialogRef.current?.showModal();
    }
  }, []);

  function onDismiss() {
    router.back();
  }

  return createPortal(
    <div className="modal-backdrop">
      <dialog ref={dialogRef} className="modal" onClose={onDismiss}>
        {children}
        <button onClick={onDismiss} className="close-button" />
      </dialog>
    </div>,
    document.getElementById("modal-root")!,
  );
}

both default.tsx files just return null:

export default function Default() {
  return null;
}

Expected behavior is to render the gallery on home route, change the route on click and show the modal, however instead of the gallery on houme route I get a 404 error. In the console this error is clarified as:

No default component was found for a parallel route rendered on this page. Falling back to nearest NotFound boundary. Learn more: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#defaultjs Missing slots: @modal

So does Next just not see the @modal at all?

t3dotgg / t3gallery

Parallel routes from Nextgram example result in 404 on home page #6