waitFor not working for nested TapGestureHandlers

[dandre-hound]

I have a pretty simple component, a notification with a profile photo. The notification is tappable (which triggers a subtle reanimated v2.0.0-rc.1 opacity/scale animation), and the profile photo is also tappable (same animation). The profile photo is rendered as a child of the notification component, and it has its own tap gesture handler (using gesture handler v1.9.0). The component looks like so:

-----------------------------------
|  --------                        |
|  | photo |  Joe liked your post  |
|  --------                        |
-----------------------------------

When I tap on the profile photo, both animations are fired. I only want the profile photo's animation to run. My understanding of waitFor would let me only activate the profile photo animation. Is this not possible...? I've tried every combination of waitFor, simultaneousHandlers, minDist, etc and no matter what, both animations run if I tap the child component (the photo). Tapping the parent component triggers the correct animation, and the profile photo does not animate. What makes it worse is that when releasing the profile photo gesture, the photo's animation resets, but the parent component's animation does not?

Am I completely misunderstanding how UI hierarchy works with gesture handlers?

I tried to make an expo snack, but reanimated 2.0.0-rc.1 doesn't seem to be supported.

//@refresh reset
import React from 'react'
import {
  View,
  StyleSheet
} from 'react-native'
import { TapGestureHandler } from 'react-native-gesture-handler'
import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'

export default function App() {
  const buttonRef = React.createRef()
  const photoRef = React.createRef()

  const buttonProgress = useSharedValue(1)
  const photoProgress = useSharedValue(1)

  function resetButtonAnimation() {
    'worklet';
    buttonProgress.value = withTiming(1)
  }

  function resetPhotoAnimation() {
    'worklet';
    photoProgress.value = withTiming(1)
  }

  const buttonGestureHandler = useAnimatedGestureHandler({
    onStart: () => {
      buttonProgress.value = withTiming(0.9)
    },
    onActive: () => {

    },
    onFinish: () => {
      resetButtonAnimation()
    },
  })

  const photoGestureHandler = useAnimatedGestureHandler({
    onStart: () => {
      photoProgress.value = withTiming(0.9)
    },
    onActive: () => {

    },
    onFinish: () => {
      resetPhotoAnimation()
    },
  })

  const animatedButtonStyles = useAnimatedStyle(() => {
    return {
      opacity: buttonProgress.value,
      transform: [
        { scale: buttonProgress.value }
      ]
    }
  })

  const animatedPhotoStyles = useAnimatedStyle(() => {
    return {
      opacity: photoProgress.value,
      transform: [
        { scale: photoProgress.value }
      ]
    }
  })

  return (
    <View style={styles.container}>
      <TapGestureHandler
        ref={buttonRef}
        waitFor={photoRef}
        onGestureEvent={buttonGestureHandler}>
        <Animated.View style={[styles.button, animatedButtonStyles]}>
          <TapGestureHandler
            ref={photoRef}
            onGestureEvent={photoGestureHandler}>
            <Animated.View style={[styles.photo, animatedPhotoStyles]} />
          </TapGestureHandler>
        </Animated.View>
      </TapGestureHandler>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'pink'
  },
  button: {
    width: '80%',
    height: 100,
    backgroundColor: 'grey'
  },
  photo: {
    height: 80,
    width: 80,
    backgroundColor: 'red'
  }
})

#784 seems to be the same issue, though I'm seeing this on both ios and android.