Why border of <td> in <table> wrapped with dnd-kit/sortable not move together with <td> when <td> is dragged?

Question

I'm writing a sortable table with dnd-kit, and I encounter a problem

Table.tsx

import {
  DndContext,
  KeyboardSensor,
  MouseSensor,
  TouchSensor,
  useSensor,
  useSensors,
} from "@dnd-kit/core";
import {
  SortableContext,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { DraggableTableRow } from "./DraggableTableRow";

export default function Table() {
  const sensors = useSensors(
    useSensor(MouseSensor, {}),
    useSensor(TouchSensor, {}),
    useSensor(KeyboardSensor, {}),
  );

  const elements = [{ id: "d1" }, { id: "d2" }];
  const ids = elements.map((d) => d.id);

  return (
    <DndContext sensors={sensors}>
      <SortableContext items={ids} strategy={verticalListSortingStrategy}>
        <table>
          <tbody>
            {elements.map((ele) => (
              <DraggableTableRow row={ele} />
            ))}
          </tbody>
        </table>
      </SortableContext>
    </DndContext>
  );
}

DraggableTableRow.tsx

import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

export const DraggableTableRow = ({ row }: { row: { id: string } }) => {
  const {
    attributes,
    listeners,
    transform,
    transition,
    setNodeRef,
    setActivatorNodeRef,
  } = useSortable({
    id: row.id,
  });
  const style = {
    transform: CSS.Translate.toString(transform),
    transition: transition,
  };
  return (
    <tr ref={setNodeRef} {...attributes} style={style}>
      <td style={{ borderBottom: "1px solid silver" }}>
        <span ref={setActivatorNodeRef} {...listeners}>
          DRAG
        </span>
        <span>JI</span>
      </td>
    </tr>
  );
};

The code above cannot drag the border of <td> together with <td>, like this:

sample1

However, I found that some sortable table codes on CodeSandbox do not have such problem, and after replacing the code on codeSandbox with mine, there is no problem with border when dragging <td>, like this:

sample2

So what is the problem of my code? How can I drag the border together with <td>?