Hello, I have a little bit of an issue when I'm trying to use parallel routes to show a modal. It's still routing to the actual page instead of showing the content I have put into page.tsx on the intercepted path. My current setup is as follows:

app/(home)/tasks/task/[id]/page.tsx <--- This is the main page
app/(home)/tasks/task/[id]/layout.tsx <--- This contains children and modal combination
app/(home)/tasks/task/[id]/@modal/(.)attachments/page.tsx <-- This is content of the modal
app/(home)/tasks/task/[id]/attachments/page.tsx <-- This is fallback page

I'm using next 15.

Code for layout:

import type { PropsWithChildren, ReactNode } from 'react';

export type LayoutProps = Readonly<
  PropsWithChildren<{
    modals: ReactNode;
  }>
>;

export default async function Layout({
                                       modals,
                                       children,
                                     }: LayoutProps) {
  return (
    <>
      {modals}
      {children}
    </>
  );
}

Task page:

import { TasksDetailPage, type TasksDetailPageProps } from '@company/app-tasks';

type Params = Promise<{ id: string }>;

export interface TaskDetailPageProps {
  params: Params;
}

export default async function TaskDetail(props: TaskDetailPageProps) {
  const params = await props.params;
  const appProps: TasksDetailPageProps = { params };

  return <TasksDetailPage {...appProps} />;
}