React Native Three - 3d player movement with camera movement simultaneously

How to mimic dual pan responders to be able to work at the same time, like left part of the screen works with movement actions, while right controls camera. I want to be able to change movement and camera at the same time, but if one panResponder is active, second cannot activate.

import React, { useState, useRef } from 'react';
import { View, StyleSheet, PanResponder, Text } from 'react-native';

const TrueDualPanResponders = () => {
  // Track positions and active states separately
  const [view1, setView1] = useState({ x: 0, y: 0 });
  const [view2, setView2] = useState({ x: 0, y: 0 });
  
  // Track touch identifiers to prevent stealing
  const touchMap = useRef({});

  // Create a PanResponder with unique identifier
  const createPanResponder = (setPosition) => {
    return PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      
      onPanResponderGrant: (evt, gestureState) => {
        const { identifier } = evt.nativeEvent;
        touchMap.current[identifier] = true;
      },
      
      onPanResponderMove: (evt, gestureState) => {
        setPosition({
          x: gestureState.dx,
          y: gestureState.dy
        });
      },
      
      onPanResponderRelease: (evt, gestureState) => {
        const { identifier } = evt.nativeEvent;
        delete touchMap.current[identifier];
        setPosition({ x: 0, y: 0 });
      },
      
      onPanResponderTerminationRequest: (evt) => {
        // Only allow termination if this is the only active touch
        const { identifier } = evt.nativeEvent;
        return Object.keys(touchMap.current).length === 1 && 
               touchMap.current[identifier];
      },
      
      onShouldBlockNativeResponder: () => {
        // Allow native components to work alongside
        return false;
      }
    });
  };

  const panResponder1 = createPanResponder(setView1);
  const panResponder2 = createPanResponder(setView2);

  return (
    <View style={styles.container}>
      <View
        style={[
          styles.box,
          styles.box1,
          { transform: [{ translateX: view1.x }, { translateY: view1.y }] }
        ]}
        {...panResponder1.panHandlers}
      >
        <Text style={styles.text}>Drag Me 1</Text>
        <Text style={styles.coords}>
          X: {view1.x.toFixed(1)}, Y: {view1.y.toFixed(1)}
        </Text>
      </View>

      <View
        style={[
          styles.box,
          styles.box2,
          { transform: [{ translateX: view2.x }, { translateY: view2.y }] }
        ]}
        {...panResponder2.panHandlers}
      >
        <Text style={styles.text}>Drag Me 2</Text>
        <Text style={styles.coords}>
          X: {view2.x.toFixed(1)}, Y: {view2.y.toFixed(1)}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5'
  },
  box: {
    width: 150,
    height: 150,
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
  },
  box1: {
    left: 50,
    backgroundColor: 'rgba(100, 200, 255, 0.9)',
  },
  box2: {
    right: 50,
    backgroundColor: 'rgba(255, 200, 100, 0.9)',
  },
  text: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  coords: {
    fontSize: 14,
    color: '#333',
    marginTop: 8,
  },
});

export default TrueDualPanResponders;

How i can enable that behavior in this component?