React Dnd useDrag не работает должным образом?

Question

Я использую реагировать на dnd, и метод useDrag не работает должным образом. Позвольте мне прояснить ситуацию:

1. Пользователь будет перетаскивать элемент списка слева направо, как указано ниже:
2. Окончательный результат правой стороны будет выглядеть следующим образом: pi c,

каждый список элементов списка 1, 2, 3 будет перетаскиваться везде и сбрасываться.

Элементы списка Список 1 Код использования useDrag:

const [{ isDragging }, drag, preview] = useDrag({
    item: {
      type: 'tool',
      id: id
    },
    canDrag: true,
    begin(props, monitor, component) {
      document.querySelectorAll(".rowWrapper").forEach(function(item){
        item.classList.add("rowBorder", "pd-row-drag", "mb-row-drag");
      });         
      document.querySelectorAll(".drop-area").forEach(function(element) {
        element.classList.add("dropAreaPosition");
      });
      document.querySelectorAll(".rowBorderOverlay").forEach(function(element) {
        element.classList.add("hideElement");
      });
      document.querySelectorAll(".rowActions").forEach(function(element) {
        element.classList.add("hideElement");
      });
    },
    end(props, monitor, component) {      
      document.querySelectorAll(".rowWrapper").forEach(function(element) {
        element.classList.remove("rowBorder", "pd-row-drag", "mb-row-drag");
      });
      document.querySelectorAll(".dropZone").forEach(function(element) {
        element.classList.remove("showDropZone");
      });
      document.querySelectorAll(".drop-area").forEach(function(element) {
        element.classList.remove("placeHolder","dropAreaPosition");
      });
      document.querySelectorAll(".rowActions").forEach(function(element) {
        element.classList.remove("hideElement");
      });
    },
    collect: monitor => ({
      item: monitor.getItem(),
      isDragging: !!monitor.isDragging()
    }),
});

То, что я делаю здесь, когда начинается перетаскивание, я делаю вышеуказанные вещи как добавление классов / удаление. Делая так, useDrag не работает должным образом, когда вы перетаскиваете список 1. Полный контейнер не перетаскивается только на его часть.

Если я удаляю начало, конец, я могу перетащить весь контейнер, я не знаете, что вызывает здесь проблему?

Любая помощь в этом действительно заметна? или как мне сделать такие вещи, как добавление классов / удаление волнообразного перетаскивания или начало перетаскивания?