Drag and Drop with dnd-kit

import { DndContext, closestCenter } from "@dnd-kit/core";
import { SortableContext, useSortable, arrayMove } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

function SortableItem({ id }: { id: string }) {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
  return (
    <div ref={setNodeRef}
         style={{ transform: CSS.Transform.toString(transform), transition }}
         {...attributes} {...listeners}
         className="p-4 bg-slate-800 rounded-xl cursor-grab">
      {id}
    </div>
  );
}