How do I open a bottom sheet in a modal?

[ryuji-orca]

Below is my minimal file structure.

├── app
│   ├── (main)
│   │   ├── (tabs)
│   │   │   ├── alert
│   │   │   │   ├── _layout.tsx
│   │   │   │   ├── index.tsx
│   │   │   ├── _layout.tsx
│   │   │   └── index.tsx
│   │   ├── modal
│   │   │   ├── _layout.tsx
│   │   │   ├── createAlert.tsx
│   │   │   └── demo.tsx
│   │   └── _layout.tsx
│   ├── _layout.tsx
│   └── index.tsx
├── component
│   ├── bottom-sheet.tsx

We will share the code for the necessary parts.

(main)/_layout.tsx

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen
        name="(tabs)"
        options={{
          headerShown: false,
        }}
      />

      <Stack.Screen
        name="modal/createAlert"
        options={{
          presentation: "fullScreenModal",
          title: "",
          headerShadowVisible: false,
          headerLargeTitleShadowVisible: false,
      />
    </Stack>
  )
}

(main)/modal/_layout.tsx

export const unstable_settings = {
  initialRouteName: "createAlert",
}

export default function Layout() {
  if (typeof window === "undefined") {
    return <Slot />
  }
  const { BottomSheet } =
    require("../../../component/bottom-sheet") as typeof import("../../../component/bottom-sheet")

  return (
    <>
      <BottomSheet screenOptions={{}} />
    </>
  )
}

(main)/modal/createAlert.tsx

const Modal = () => {
  return (
    <Link href="/(main)/modal/demo">
      <Text>Open Share demo</Text>
    </Link>
  )
}

export default Modal

(main)/modal/demo.tsx

export default function Page() {
  return (
    <View>
      <View>
        <Text>Sheet</Text>
        <Link href="/alert/">Close</Link>
      </View>
    </View>
  )
}

component/bottom-sheet.tsx

import type { BottomSheetNavigationOptions } from "@th3rdwave/react-navigation-bottom-sheet"
import { createBottomSheetNavigator } from "@th3rdwave/react-navigation-bottom-sheet"
import { withLayoutContext } from "expo-router"

const { Navigator } = createBottomSheetNavigator()

export const BottomSheet = withLayoutContext<
  BottomSheetNavigationOptions,
  typeof Navigator
>(Navigator)

Delete modal/_layout.tsx and the modal will open as usual.
However, if I add the above code to modal/_layout.tsx, the bottom sheet works, but it is a page decision, not modal.