I am using react-dnd, the code below works fine for cordinates.length === 1 however, if length increases it still only drags the last item in the cordinates list.

<div style={{ height, width }} >
      {/* render all cordinates, select the uuid of dragged cordinate to update */}
      {cordinates.map((cordinate) => (
        <img
          onDrag={() => {
            setDraggedMember(cordinate.fieldUuid);
            console.log('something dragged');
          }}
          ref={drag}
          src={url}
          key={cordinate.fieldUuid}
          alt="draggable element"
          style={{
            width: (type === 'TextField' && width),
            height: (type === 'TextField' && height),
            position: 'fixed',
            top: cordinate.y,
            left: cordinate.x,
            border: `3px solid ${color}`,
          }}
        />
      ))}
    </div>