nested TapGesture Handler React Native - react-native

Question

I've been trying to use Tap Gesture Handler in my React Native project but I'm facing some problem with nested gestures. I've one parent TapGestureHandler(let's call it A) and and child TapGestureHandler(let's call it B). When I click on B then A is also getting executed. Please help me to solve this problem.
Here's my code for TapGestureHandler A:
<TapGestureHandler
ref={ref}
onHandlerStateChange={() => console.log("1")}>
<Animated.View>
<View style={styles.container}>
<View style={styles.leftContainer}>
<ProfilePic image={user.image} />
</View>
<View style={styles.rightContainer}>
<PostCardHeader user={user} />
<Discription discription={discription} />
<View style={styles.gridContainer}>
<ImageGrid waitFor={ref} images={attachedfiles} />
</View>
<Footer />
</View>
</View>
</Animated.View>
</TapGestureHandler>
Here's my code for TapGestureHandler B:
const ImageGrid = ({waitFor}) => {
return (
<TapGestureHandler
waitFor={waitFor || undefined}
onHandlerStateChange={() => console.log("2")}>
<Animated.View style={{ flex: 1 }}>
<Image
style={styles.image}
source={images[0]} />
</Animated.View>
</TapGestureHandler>
)
}