Item shortly jumps back to original position in draggable flatlist - expo app

Question

I have a weird behaviour with my draggable flatlist in my expo react native app. I basically works fine, but for a short moment a dragged item jumps back to it´s original position.

enter image description here

I also get this warning: [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.

import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TouchableOpacity,
} from "react-native";
import DraggableFlatList from "react-native-draggable-flatlist";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { useState, useCallback, useEffect } from "react";

import PrimaryButton from "../components/buttons/PrimaryButton";

const ListScreen = ({ route }) => {
  const [shopList, setShopList] = useState([
    { id: "1", title: "Apfel" },
    { id: "2", title: "Gurke" },
    { id: "3", title: "Paprika" },
    { id: "4", title: "Senf" },
    { id: "5", title: "Brot" },
    { id: "6", title: "Wurst" },
    { id: "7", title: "Käse" },
  ]);

  useEffect(() => {
    console.log(shopList);
  }, [shopList]);

  const renderItem = ({ item, drag, isActive }) => (
    <TouchableOpacity
      onLongPress={drag}
      disabled={isActive}
      style={[
        styles.item,
        {
          backgroundColor: isActive ? "red" : item.backgroundColor,
        },
      ]}
    >
      <View>
        <Text style={styles.text}>{item.title}</Text>
      </View>
    </TouchableOpacity>
  );

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.container}>
        <DraggableFlatList
          data={shopList}
          keyExtractor={(item) => item.id}
          onDragEnd={({ data }) => {
            console.log("in drag", data);

            setShopList([...data]);
          }}
          renderItem={renderItem}
        />
        <View style={styles.addButtonContainer}>
          <PrimaryButton>Add new item</PrimaryButton>
        </View>
      </View>
    </GestureHandlerRootView>
  );
};

export default ListScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  addButtonContainer: {
    padding: 10,
  },
  text: {
    fontSize: 18,
  },
  item: {
    padding: 20,
    marginVertical: 5,
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 5,
  },
});
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TouchableOpacity,
} from "react-native";
import DraggableFlatList from "react-native-draggable-flatlist";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { useState, useCallback, useEffect } from "react";

import PrimaryButton from "../components/buttons/PrimaryButton";

const ListScreen = ({ route }) => {
  const [shopList, setShopList] = useState([
    { id: "1", title: "Apfel" },
    { id: "2", title: "Gurke" },
    { id: "3", title: "Paprika" },
    { id: "4", title: "Senf" },
    { id: "5", title: "Brot" },
    { id: "6", title: "Wurst" },
    { id: "7", title: "Käse" },
  ]);

  useEffect(() => {
    console.log(shopList);
  }, [shopList]);

  const renderItem = ({ item, drag, isActive }) => (
    <TouchableOpacity
      onLongPress={drag}
      disabled={isActive}
      style={[
        styles.item,
        {
          backgroundColor: isActive ? "red" : item.backgroundColor,
        },
      ]}
    >
      <View>
        <Text style={styles.text}>{item.title}</Text>
      </View>
    </TouchableOpacity>
  );

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.container}>
        <DraggableFlatList
          data={shopList}
          keyExtractor={(item) => item.id}
          onDragEnd={({ data }) => {
            console.log("in drag", data);

            setShopList([...data]);
          }}
          renderItem={renderItem}
        />
        <View style={styles.addButtonContainer}>
          <PrimaryButton>Add new item</PrimaryButton>
        </View>
      </View>
    </GestureHandlerRootView>
  );
};

export default ListScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  addButtonContainer: {
    padding: 10,
  },
  text: {
    fontSize: 18,
  },
  item: {
    padding: 20,
    marginVertical: 5,
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 5,
  },
});

I tried different packages and code variations but got no solution yet.