title: HTML ondrag in table shows disabled
body: <p>I'm trying to make a table where I can drag and drop items into. Elements in the table are moveable which works fine. However, when I try to drag a component from outside the table into the table, the cursor stays disabled and upon dropping, my whole React freezes. I don't see what is the difference between the element from outside and inside the table. I use Chakra-UI for the table.</p>
  <p>So this sums up what I would like to do but can't.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;Button draggable onDrag={()=&gt;setDragging(event)}&gt;Drag element&lt;/Button&gt;
    &lt;some divs&gt;
    &lt;Table&gt;
      &lt;Tbody&gt;
        &lt;Tr&gt;
          &lt;Td onDragOver={(e)=&gt;{e.preventDefault(); e.stopPropagation();}}&gt;
            &lt;some divs&gt;
            ...
  </code></pre>
  <p>While this works fine.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;Table&gt;
      &lt;Tbody&gt;
        &lt;Tr&gt;
          &lt;Td onDragOver={(e)=&gt;{e.preventDefault(); e.stopPropagation();}}&gt;
            &lt;Button draggable onDrag={()=&gt;setDragging(event)}&gt;Drag Element&lt;/Button&gt;
            ...
  </code></pre>