how can i handle multiple panhandler using map an array

[nknaveen007]

i have a input box.each time a user add a text in an array. that texts map to display in a screen .
i want to handle each text panhandler seprately.

this is my current code:

import Animated, {useSharedValue,useAnimatedStyle,useAnimatedGestureHandler,withSpring} from 'react-native-reanimated';
import { View,Text } from 'react-native';
import React,{useState} from 'react';
import { TextInput } from 'react-native-paper';
import { PanGestureHandler} from 'react-native-gesture-handler';

  
export default function sampleScreen() {
  
      const [TextArray, setTextArray] = useState([])
      const [TextValue, setTextValue] = useState('')

const pressed = useSharedValue(false);
const startingPosition = 100
const x = useSharedValue(startingPosition);
const y = useSharedValue(startingPosition);

const eventHandler = useAnimatedGestureHandler({
    onStart: (event, ctx) => {
        pressed.value = true;
        ctx.startX = x.value;
        ctx.startY = y.value;
      },
      onActive: (event, ctx) => {
        x.value = ctx.startX + event.translationX;
        y.value = ctx.startY + event.translationY;
      },
      onEnd: (event, ctx) => {
        pressed.value = false;
        x.value = withSpring(x.value);
        y.value = withSpring(y.value);
      },
  });

  
  const style = useAnimatedStyle(() => {
    return {
      color: pressed.value ? 'red' : '#001972',
      transform: [{ translateX: x.value }, { translateY: y.value }],
    };
  });
  
    return (
      <View style={{flex: 1,}}>
        <View>
        <TextInput
      label="Text"
      value={TextValue}
      autoCompleteType={'off'}
      autoCorrect={false}
      onSubmitEditing={()=>
        {
            setTextArray([...TextArray,{value:TextValue}])
            setTextValue('')
        }
        }
      onChangeText={text => setTextValue(text)}
    />
        </View>

        
       {TextArray.map((item,index)=>{
           return(
        <PanGestureHandler key={index} onGestureEvent={eventHandler}>
            <Animated.Text key={index} style={[{color:'red',fontSize:20},style]} >{item.value}</Animated.Text>
        </PanGestureHandler>
           )
       })}


 

 

      </View>
    );
  }