How to Drag and Drop Multiple tables multi columns?

Expected behavior drag and drop multiple tables with 3 columns can be used

Actual behavior Uncaught TypeError: Cannot read properties of null (reading 'insertBefore')

Resources (screenshots, code snippets etc.)

<section class="p-4 d-flex justify-content-center w-100">
    <div id="sortable-multi-tables-1" data-mdb-sortable="sortable" class="sortable-list" data-mdb-connected-list="#sortable-multi-tables-2,#sortable-multi-tables-3">
      <h4 class="text-center pt-2">To do</h4>
      <div class="sortable-item">Item 1</div>
      <div class="sortable-item">Item 2</div>
      <div class="sortable-item">Item 3</div>
      <div class="sortable-item">Item 4</div>
      <div class="sortable-item">Item 5</div>
      <div class="sortable-item" data-mdb-disabled="true">Disabled</div>
    </div>

    <div id="sortable-multi-tables-2" data-mdb-sortable="sortable" class="sortable-list" data-mdb-connected-list="#sortable-multi-tables-1,#sortable-multi-tables-3">
      <h4 class="text-center pt-2">Processing</h4>
      <div class="sortable-item">Item 6</div>
      <div class="sortable-item">Item 7</div>
      <div class="sortable-item">Item 8</div>
      <div class="sortable-item">Item 9</div>
      <div class="sortable-item">Item 10</div>
    </div>

    <div id="sortable-multi-tables-3" data-mdb-sortable="sortable" class="sortable-list" data-mdb-connected-list="#sortable-multi-tables-1,#sortable-multi-tables-2">
      <h4 class="text-center pt-2">Done</h4>
      <div class="sortable-item">Item 11</div>
      <div class="sortable-item">Item 12</div>
      <div class="sortable-item">Item 13</div>
      <div class="sortable-item">Item 14</div>
      <div class="sortable-item">Item 15</div>
    </div>
</section>