I want to create a drag-and-drop list where I can press and hold an icon, then move it to a desired position within the list, with a visual representation of the icon moving as I drag it. However, right now, my icons only move to the 0 position in the array, and the icon in the UI does not reflect the movement. In additional i receiving warring message in the terminal ” WARN [Reanimated] Tried to modify key current of an object which has been already passed to a worklet. See
https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#tried-to-modify-key-of-an-object-which-has-been-converted-to-a-shareable
for more details.”

const ListOfLinks = ({navigation}) => {
  const [mediaData, setMediaData] = useState(MEDIA_DATA);

  const handlePress = useCallback(
    (item: {id: string; title: string; image: string}) => {
      navigation.navigate('MediaLinkModal', {
        selectedItemTitle: item.title,
        selectedItemImage: item.image,
      });
    },
    [navigation],
  );

  const renderItem = useCallback(
    ({item, drag, isActive}: RenderItemParams<Item>) => (
      <ScaleDecorator>
        <TouchableOpacity
          onLongPress={drag}
          disabled={isActive}
          style={[
            styles.rowItem,
            {
              backgroundColor: isActive ? 'lightgray' : 'transparent',
            },
          ]}
          onPress={() => handlePress(item)}>
          <Image source={{uri: item.image}} style={styles.image} />
          <Text style={styles.text}>{item.title}</Text>
        </TouchableOpacity>
      </ScaleDecorator>
    ),
    [handlePress],
  );

  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <DraggableFlatList
        data={mediaData}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        onDragEnd={({data}) => {
          setMediaData(data);
        }}
        numColumns={3}
        columnWrapperStyle={styles.columnWrapper}
        activationDistance={15}
      />
    </GestureHandlerRootView>
  );
};

function App() {
  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <AppNavigator />
    </GestureHandlerRootView>
  );
}

export default App;