this is my mini-game, when the user drops the brand into the wrong box, that brand should visually return to the initial position from where the user took it, however, this does not happen, I only get a message that it was dropped into the wrong box and the brand remains in that box.

import React from 'react';
import { View, Text, Alert } from 'react-native';
import Draggable from 'react-native-draggable';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

const initialBrands = [
  { brandName: 'Brand A', iconName: 'iconA', color: 'red' },
  { brandName: 'Brand B', iconName: 'iconB', color: 'blue' },
  { brandName: 'Brand C', iconName: 'iconC', color: 'green' },
  // Dodajte više brendova po potrebi
];

const Bottles = () => {
  const [draggableItems, setDraggableItems] = useState(initialBrands.map((brand, index) => ({
    ...brand,
    x: 0,
    y: 0,
    id: index,
  })));
  const droppableBoxes = useRef([]);

  const handleDragRelease = (item, gestureState) => {
  const { moveX, moveY } = gestureState;
  let isCorrectDrop = false;

  droppableBoxes.current.forEach((box, index) => {
    box.measure((fx, fy, width, height, px, py) => {
      if (
        moveX >= px &&
        moveX <= px + width &&
        moveY >= py &&
        moveY <= py + height
      ) {
        if (item.iconName === initialBrands[index].iconName) {
          isCorrectDrop = true;
          Alert.alert('Success', `Dropped ${item.brandName} in the correct box!`);
        } else {
          Alert.alert('Error', `Wrong box for ${item.brandName}`);
          // Resetujemo igricu na pocetak samo ako je brend spušten u pogrešan box
          setDraggableItems(prevItems => 
            prevItems.map((prevItem) => {
              // Ako je trenutni brend koji se ažurira jednak brendu koji je spušten u pogrešan box, vraćamo ga na početnu poziciju
              if (prevItem.iconName === item.iconName) {
                return {
                  ...prevItem,
                  x: 0,
                  y: 0,
                };
              }
              return prevItem;
            })
          );
        }
      }
    });
  });
};

  

  return (
    <GestureHandlerRootView style={styles.container}>
      <View style={styles.draggableContainer}>
        {draggableItems.map((item) => (
          <Draggable
            key={item.id}
            renderSize={56}
            renderColor={item.color}
            renderText={item.brandName}
            isCircle
            x={item.x}
            y={item.y}
            onDragRelease={(event, gestureState) => handleDragRelease(item, gestureState)}
          />
        ))}
      </View>
      <View style={styles.droppableContainer}>
        {initialBrands.map((brand, index) => (
          <View
            key={index}
            style={styles.droppableBox}
            ref={el => droppableBoxes.current[index] = el}
          >
            <Text style={styles.droppableText}>{brand.iconName}</Text>
          </View>
        ))}
      </View>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  draggableContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  droppableContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  droppableBox: {
    width: 100,
    height: 100,
    borderWidth: 2,
    borderColor: '#000',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
  },
  droppableText: {
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default Bottles;

I tried to return only that wrong brand to the initial position, I tried to reset the whole game when the brand is released in the wrong box, but nothing worked for me