<tbody> renders twice when using Vuedraggable in Vueitfy 3

Question

I would like a simple table where I could drag and drop rows to reorder them. The problem I'm having right now is that the tbody is rendered twice, which messes up the layout. I see examples for Vue/Vuetify 2 but that doesn't work anymore in Vuetify 3.

An example for version 2 can be found here https://codesandbox.io/p/sandbox/vuetify-v-data-tables-draggable-with-slots-1lecb?

This is my current code for Version 3:

<v-data-table
  class="table-todo"
  :items="items"
  :headers="headers">
  <template v-slot:body="{ items }">
    <draggable
      :list="items"
      item-key="name"
      tag="tbody"
      >
      <template #item="{ element }">
        <tr>
          <td>{{ element.name }}</td>
          <td>{{ element.light }}</td>
          <td>{{ element.height }}</td>
          <td>{{ element.petFriendly }}</td>
          <td>{{ element.price }}</td>
        </tr>
      </template>
    </draggable>
  </template>
</v-data-table>

The result in the browser: enter image description here

Side note: the current elements are draggable, but as soon as I drop one they snap back to the original position, not sure if this is related or not. Still looking for a solution to that aswell.

I tried to play around with removing the tbody tag on the draggable element but that just renders a div with the rows instead of the tbody, which also places them in all in the first