Partially transparent modal overlay screen with previous screen in the background in react navigation 5 or 6?

Question

We are currently using react-navigation (5.6) in our react native app.

We use a BottomTabNavigator as the root navigation.

const BottomTab = createBottomTabNavigator()

The individual screens under this BottomTab.Navigator are navigators themselves. e.g.

 <BottomTab.Screen
            name={AppRoute.MORE}
            component={MoreTabNavigator}
            options={{
                title: 'More',
                tabBarIcon: ({ color, size }) => {
                    return <Icon style={{ width: size, height: size }} fill={color} name="more-horizontal-outline" />
                }
            }}
        />

The MoreTabNavigator is as follows:

const MoreTabNavigator = (): React.ReactElement => {
    const { Navigator, Screen } = createStackNavigator<RootStackParamList>();

return (
    <Navigator headerMode="none"
        screenOptions={{
            headerShown: false,
            cardStyle: { backgroundColor: 'transparent' },
            cardOverlayEnabled: true,
            cardStyleInterpolator: ({ current: { progress } }) => ({
                cardStyle: {
                    opacity: progress.interpolate({
                        inputRange: [0, 0.5, 0.9, 1],
                        outputRange: [0, 0.25, 0.7, 1],
                    }),
                },
                overlayStyle: {
                    opacity: progress.interpolate({
                        inputRange: [0, 1],
                        outputRange: [0, 0.5],
                        extrapolate: 'clamp',
                    }),
                },
            }),
        }}
        mode="modal">
        <Screen
            name={AppRoute.MORE}
            component={MoreScreen}
        />
        <Screen
            name={AppRoute.CONTACT_US}
            component={ContactUsScreen}
        />
    </Navigator>
    
)

}

What I am trying to achieve is that when user clicks More tab, it should show a transparent overlay with the previous screen in the background. I want to create something like this

I am not sure how this is to be done. I have tried different solutions given on SO but haven't been able to achieve the desired effect. I always get a solid color grey background.

I tried with version 6 as well using presentationalModal however no luck. I am looking for react-navigation v5 or v6 solution

Any help or pointers would be really helpful.

Thanks in advance