[v4] [Android] Unable to click on touchable element when adding a Navigation Container inside Bottom Sheet Modal

[ravindraguptacapgemini]

Clicks are not working very intuitively on Android when we are trying to add a navigation container inside the Bottom Sheet Modal.

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.1
react-native	0.72.9
react-native-reanimated	3.6.1
react-native-gesture-handler	2.14.0

Steps To Reproduce

1. Create Navigation Container with a StackNavigation inside it
2. Try tapping on touchable components on the screen in stack screen
3. Observer the behaviour

Describe what you expected to happen:

1. Touch should work fine

Reproducible sample code

`const renderBottomDrawer = () => { return ( <BottomSheetModal ref={bottomSheetModalRef} snapPoints={['95%']} enableDynamicSizing={false} onDismiss={() => { }} > <FilterNavigator /> </BottomSheetModal > ); };

const FilterNavigator = () => { const screenOptions = useMemo<StackNavigationOptions>( () => ({ ...TransitionPresets.SlideFromRightIOS, headerShown: false, safeAreaInsets: { top: 0 }, cardStyle: { backgroundColor: 'white', overflow: 'visible', }, animationEnabled: false, }), [] );

const screenAOptions = useMemo(() => ({ headerLeft: () => null }), []);
return (
  <NavigationContainer independent={true}>
    <Stack.Navigator screenOptions={screenOptions}>
      <Stack.Screen
        name="MySubmissionsFilter"
        options={screenAOptions}
      >
        {(props) => <MyFilter
          {...props}
          testID="myFilter"
          onShowResult={(value) => {
            setFilter(value);
            bottomSheetModalRef.current?.close();
          }}
        />}
      </Stack.Screen>
    </Stack.Navigator>
  </NavigationContainer>
);

};`