Issue while swapping elements in Shopify swappable

Actually i have a table in which there are multiple tbody elements and i am swapping tbody with one another and their child inside like tr with one another and they are swapping.
Now what i want is that tr elements should be swappable inside their parent tbody and they should not swap with the tr elements of other tbody elements.

I am using:

JS:

let tableContainer = document.querySelectorAll(".draggable-zone");
let tbodyContainer = document.querySelectorAll(".tbody_draggable_zone");
   

function initSwappable(containers) {
    if (containers.length === 0) {
        return false;
    }

    var swappable = new Swappable.default(containers, {
        draggable: ".draggable",
        handle: ".draggable .draggable-handle",
        mirror: {
            //appendTo: selector,
            appendTo: "body",
            constrainDimensions: true
        }
    });
}

initSwappable(tableContainer);
initSwappable(tbodyContainer);

HTML:

<table
  class="table align-middle draggable-zone table-row-dashed fs-6 gy-5"
  id="kt_table_users"
>
  <thead>
    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
      <th class="w-10px pe-2"></th>
      <th class="w-10px pe-2"></th>
    </tr>
  </thead>
  <tbody class="draggable">
    <tr>
      <td class="ticker_td">
        <p class="fs-5">
          کوٹ رادھاکشن: جڑانوالہ میں ہونے والے افسوس ناک واقعہ کے بعد ،ملکی
          سیکیورٹی صورتحال کے پیش نظر کوٹ رادھاکشن شہر بھر میں پولیس کی جانب سے
          فلیگ مارچ کیا گیا
        </p>
      </td>
    </tr>
    <tr>
      <td colspan="12">
        <div class="ticker_details_table table-responsive">
          <div class="separator"></div>
          <table class="table align-middle table-row-dashed fs-6 gy-5">
            <tbody class="text-gray-600 fw-semibold tbody_draggable_zone">
              <tr class="draggable">
                <td>A</td>
              </tr>
              <tr class="draggable">
                <td>B</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
  <tbody class="draggable">
    <tr>
      <td class="ticker_td">
        <p class="fs-5">
          کوٹ رادھاکشن: جڑانوالہ میں ہونے والے افسوس ناک واقعہ کے بعد ،ملکی
          سیکیورٹی صورتحال کے پیش نظر کوٹ رادھاکشن شہر بھر میں پولیس کی جانب سے
          فلیگ مارچ کیا گیا
        </p>
      </td>
    </tr>
    <tr>
      <td colspan="12">
        <div class="ticker_details_table table-responsive">
          <div class="separator"></div>
          <table class="table align-middle table-row-dashed fs-6 gy-5">
            <tbody class="text-gray-600 fw-semibold tbody_draggable_zone">
              <tr class="draggable">
                <td>C</td>
              </tr>
              <tr class="draggable">
                <td>D</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>;