Pressable buttons inside Animated.View making it undraggable

Question

I have tried every single stackoverflow post's solution I could find without help.

I have an Animated View which can be dragged around. However, when pressable buttons are added inside, the buttons take focus and prevents the Animated View from being draggable.If I set the zIndex value of the Animated.View higher than the buttons, it works and becomes draggagle - but then the buttons are not pressable and vice versa..

Tried solutions

1. Using const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
2. Using the TouchableOpacity component from React
3. Using the TouchableOpacity component react-native-gesture-handler
4. Using Pressable from React
5. Using RectButton from react-native-gesture-handler

Code:

  const styles = StyleSheet.create({
    container: {
    borderRadius: 20,
    height: "100%",
    width: "100%",
    overflow: "hidden",
    position: "absolute",
    zIndex: 5,
  },
  clickAreaLeft: {
    position: "absolute",
    bottom: 0,
    left: 0,
    height: "100%",
    width: "50%",
    zIndex: 4,
  },
  clickAreaRight: {
    position: "absolute",
    bottom: 0,
    right: 0,
    height: "100%",
    width: "50%",
    zIndex: 4,
  }
});

  const component = () => {
  const [position, setPosition] = useState<any>(new Animated.ValueXY());

    const panResponder = React.useRef(
      PanResponder.create({
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onPanResponderMove: (evt, gestureState) => {
          position.setValue({ x: gestureState.dx, y: gestureState.dy });
        },
        onPanResponderRelease: (evt, gestureState) => {},
      })
    ).current;

    const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);

    return (
    <View style={styles.container}>
      <Animated.View
        key={group.id}
        style={[
          { flex: 1, zIndex: 5, transform: position.getTranslateTransform() },
        ]}
        {...panResponder.panHandlers}
      >
        {pages[currentIndex]}
      </Animated.View>
      <AnimatedTouchable
        style={styles.clickAreaLeft}
        onPress={() => console.log("PRESSED L")}
      ></AnimatedTouchable>
      <AnimatedTouchable
        style={styles.clickAreaRight}
        onPress={() => console.log("PRESSED R")}
      ></AnimatedTouchable>
    </View>
    );
}