title: React Dnd useDrag is not working properly?
body: <p>I'm using react dnd and it's useDrag method not working properly. Let me elaborate the situation:</p>
  
  <ol>
  <li>User will drag list item from left to right as stated below:
  <a href="https://i.stack.imgur.com/VBEja.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VBEja.png" alt="enter image description here"></a>
  
  <ol start="2">
  <li>Final outcome of right side will be like this below pic,
  <a href="https://i.stack.imgur.com/f9oQr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f9oQr.png" alt="enter image description here"></a></li>
  </ol></li>
  </ol>
  
  <p>every list items list 1, 2, 3 will be draggable everywhere and droppable.</p>
  
  <p>The list items List 1 useDrag code is :</p>
  
  <pre><code>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 =&gt; ({
        item: monitor.getItem(),
        isDragging: !!monitor.isDragging()
      }),
  });
  </code></pre>
  
  <p>What I'm doing here is, when dragging begins I'm doing the above stuff like adding classes/removing. By doing like this, useDrag is not working properly when you drag list 1 the full container is not draggable only the portion of it.</p>
  
  <p>if I remove begin, end I can drag the entire container, I  don't know what's causing the problem here ?</p>
  
  <p>Any help on  this really appreciable ? or how do I do the stuff like adding classes/removing whild dragging or drag begin ? </p>