Why aren’t these elements dragging and dropping as expected?

I am using Playwright and trying to drag & drop the list at this site into the right order. These locators work as expected, and the drag & drop does work every so often. I have tried dragTo(), a combination of mouse up, down, and hover, and a lot of different selectors. Nothing works consistently. I am urgently preparing for a test, so any help would be appreciated, please don’t mind the sloppy code.

// launch browser and open a new page
const { context } = await launch();
const page = await context.newPage();

// go to sortable list site
await page.goto('https://qaplayground.dev/apps/sortable-list/');

// order list
const correctOrder = [
  'Jeff Bezos',
  'Bill Gates',
  'Warren Buffett',
  'Bernard Arnault',
  'Carlos Slim Helu',
  'Amancio Ortega',
  'Larry Ellison',
  'Mark Zuckerberg',
  'Michael Bloomberg',
  'Larry Page'
];

async function swapItemToIndex(textIndex, listIndex) {
  const correctItem = `div.draggable:has-text('${correctOrder[textIndex]}')`;
  const targetItem = `li[data-index="${listIndex}"]`;
  await page.dragAndDrop(correctItem, targetItem);
}

await swapItemToIndex(0, 0);
await swapItemToIndex(1, 1);

// the elements are not ordered as expected