nested TapGesture Handler 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>
   )
}