Expo-Router Bottom tabs with nested Stack Screen

I am trying the new Expo-Router with a complex nesting navigation, currently i'm trying to display a screen with a presentation of modal, which itself is a part of a bottom tab navigation, but it is not presenting as a modal but as a simple stack screen:

Project layout:

app/
  _layout.tsx
  index.tsx
  (main)/
    _layout.tsx
    (tabs)/
      _layout.tsx
      home/
      create/
      profile/
      search/
      notifications/

(main)/(tabs)/_layout.tsx:

import {Tabs} from "expo-router/tabs";
export default function Layout() {
  return (
    <Tabs>
      <Tabs.Screen name='home'/>
      <Tabs.Screen name='search'/>
      <Tabs.Screen name='create'/> // should be presented as modal
      <Tabs.Screen name='notifications'/>
      <Tabs.Screen name='profile'/>
    </Tabs>
  )
}

(main)/(tabs)/create/_layout.tsx

import {Stack} from "expo-router/stack";
export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{presentation: "modal"}}/>
    </Stack>
  )
}

The create page should be a stack with presentation set to modal in order for it to work/render as a modal screen right?

Reproducible repo:- https://github.com/theartificialguy/Threads

I was able to solve it using the listener prop in Tabs.Screen.

Reference: https://stackoverflow.com/a/68900301/11685381