Pressable buttons inside Animated.View making it undraggable

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>    );}