Hello. I've created a folder structure as shown in the image. I'm trying to set up parallel routing for @modal's page.tsx and [resultId]'s page.tsx under the /result/[resultId] path. However, the modal is not displaying as expected. I'm struggling with parallel routing, and I would appreciate your help. Thank you.

router

L (result)
  L result
    @modal
      L default.tsx
      L page.tsx
    @result
      L [resultId]
        L page.tsx
    default.tsx
    layout.tsx
    

/(result)/result/layout.tsx

export default async function ResultLayout(props: {
  children: React.ReactNode;
  modal: React.ReactNode;
  result: React.ReactNode;
}) {
  return (
    <>
      {props.modal}
      <NavBar />
      <main>
        {props.children}
        {props.result}
      </main>
      <Footer />
    </>
  );
}