issues with dnd-kit using React Query (fetched list jumps each time a list item is reordered) (trpc)

// fetches and renders the list (near identical to the docs)
const BasicListEditor = () => {
  const { data: selections } = api.selection.getOwnSelections.useQuery();
  const utils = api.useContext();

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;

    if (active.id !== over?.id) {
      utils.selection.getOwnSelections.setData(undefined, (prev) => {
        if (!prev) return prev;

        const oldIndex = prev?.findIndex((a) => a.id === active.id);
        const newIndex = prev?.findIndex((a) => a.id === over?.id);

        return arrayMove(prev, oldIndex, newIndex);
      });
    }
  }

  const sensors = useSensors(useSensor(PointerSensor));

  return (
    <DndContext
      onDragEnd={handleDragEnd}
      sensors={sensors}
      collisionDetection={closestCenter}
    >
      <SortableContext items={selections} strategy={verticalListSortingStrategy} >
        {selections.map((a) => ( <SortableItem key={a.id} id={a.id} /> ))}
      </SortableContext>
    </DndContext>
  );
};

// fetches and renders the list (near identical to the docs)
const BasicListEditor = () => {
  const { data: selections } = api.selection.getOwnSelections.useQuery();
  const utils = api.useContext();

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event;

    if (active.id !== over?.id) {
      utils.selection.getOwnSelections.setData(undefined, (prev) => {
        if (!prev) return prev;

        const oldIndex = prev?.findIndex((a) => a.id === active.id);
        const newIndex = prev?.findIndex((a) => a.id === over?.id);

        return arrayMove(prev, oldIndex, newIndex);
      });
    }
  }

  const sensors = useSensors(useSensor(PointerSensor));

  return (
    <DndContext
      onDragEnd={handleDragEnd}
      sensors={sensors}
      collisionDetection={closestCenter}
    >
      <SortableContext items={selections} strategy={verticalListSortingStrategy} >
        {selections.map((a) => ( <SortableItem key={a.id} id={a.id} /> ))}
      </SortableContext>
    </DndContext>
  );
};

// item that gets sorted
function SortableItem({ id }: { id: string }) {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });

  const style = { transform: CSS.Transform.toString(transform), transition };

  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners} >
      <p className="text-xl text-blue-500">THIS IS LIST ITEM {id}</p>
    </div>
  );
};

// item that gets sorted
function SortableItem({ id }: { id: string }) {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: id });

  const style = { transform: CSS.Transform.toString(transform), transition };

  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners} >
      <p className="text-xl text-blue-500">THIS IS LIST ITEM {id}</p>
    </div>
  );
};