When using DraggableStack, drag/drop does not work correctly after adding a new item

[cenkakay]

const EditView = ({
  valveControlValues,
  onOrderChange,
  onAddNewValveControl,
}: {
  valveControlValues: typeof DUMMY_PARAMETERS;
  onOrderChange: (newOrders: string[]) => void;
  onAddNewValveControl: () => void;
}) => {
  const onStackOrderChange = useCallback(
    (value: (string | number)[]) => {
      onOrderChange(value.map((item) => item.toString()));
    },
    [onOrderChange],
  );

  return (
    <View className="flex flex-col gap-y-2">
      <View className="flex flex-row">
        <DndProvider>
          <DraggableStack
            style={{
              display: 'flex',
              flexDirection: 'column',
              gap: 4,
            }}
            onOrderChange={onStackOrderChange}>
            {valveControlValues.map(({ id, name }) => (
              <Draggable className="flex flex-row items-center gap-x-4" key={id} id={id.toString()}>
                <DragHandleIcon className="fill-textSecondary" />
                <Text className="font-Inter-Medium-500 text-s14-l20 text-textPrimary">{name}</Text>
              </Draggable>
            ))}
          </DraggableStack>
        </DndProvider>
      </View>
      <Pressable className={SYSTEM_OUTLINE_BTN} onPress={onAddNewValveControl}>
        <Text className="font-Inter-SemiBold-600 text-s16-l24 text-textSecondary">Ekle</Text>
      </Pressable>
    </View>
  );
};

const ManualControlSection = () => {
  const [valveControlValues, setValveControlValues] = useState(DUMMY_PARAMETERS);

  const onOrderChange = useCallback((newOrders: string[]) => {
    setValveControlValues((prev) =>
      prev.map((value) => ({
        ...value,
        order: newOrders.indexOf(value.id.toString()) + 1,
      })),
    );
  }, []);

  const onAddNewValveControl = useCallback(() => {
    setValveControlValues((prev) => [
      ...prev,
      {
        id: prev.length + 1,
        name: `New Valve Control ${prev.length + 1}`,
        value: false,
        isChanged: false,
        order: prev.length + 1,
      },
    ]);
  }, []);

  return (
    <EditView
      valveControlValues={valveControlValues}
      onOrderChange={onOrderChange}
      onAddNewValveControl={onAddNewValveControl}
    />
  );
};

export default ManualControlSection;

[cenkakay]

screen-capture (19).webm