How to use BottomSheet inside model

Question

I want to add bottom sheet in Modal. I am using reanimated-bottom-sheet and react native modal.

But when I use BottomSheet inside Modal gesture not work and can't closeBottomSheet with swiping down.

I searched and I found this is RCGH problem.

So I decide to use View instead of Modal.

but View doesn't cover Header.

This is bottomSheet code:

<View style={BottomSheetStyles.container}>
  <TouchableWithoutFeedback onPress={handleOutsidePress}>
    <Animated.View style={[BottomSheetStyles.dropShadow, { opacity }]} />
  </TouchableWithoutFeedback>
  <Animated.Code exec={onChange(position, [cond(eq(position, 1), call([], onClose))])} />
  <BottomSheet
    ref={sheet}
    initialSnap={zeroIndex}
    snapPoints={snapPoints}
    callbackNode={position}
    renderHeader={() => <View style={BottomSheetStyles.header} />}
    renderContent={() => (
      <View style={[BottomSheetStyles.content, { height: "100%" }]}>{children}</View>
    )}
  />
</View>

and this is styles:

const BottomSheetStyles = StyleSheet.create({
    container: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        flex: 1,
        zIndex: 100,
    },
    dropShadow: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        flex: 1,
        zIndex: 100,
        backgroundColor: "rgba(0, 0, 0, 0.3)",
    },
    header: {
        backgroundColor: Colors.greyC4C,
        width: 90,
        height: 7,
        margin: 5,
        alignSelf: "center",
        borderRadius: 11,
    },
    content: {
        backgroundColor: Colors.whiteFFF,
        paddingTop: 18,
        borderTopLeftRadius: 22,
        borderTopRightRadius: 22,
    },
});

So problem can be solve either whit solving gesture in Modal or do something to cover Header with View.

I am using React Navigation.