Bug when dragging quickly

[aporroluyo3]

Hi guys,

I'm creating a panel to manage products, in this example the data is dynamically fetched in the first rendering. There is no effect or state that is altered after rendering that would affect the performance or duplication of the content.

The problem is that when you start updating the list order repeatedly the following errors occur:

1. Locks the first item in the list.
2. It alters the order of the values without sense.

--> I share with you a video with the demonstration

Video demo

this is the code for the list, initially it was planned to use multidrag with a large number of items but this problem prevents it completely

const [related, relatedProducts, setRelatedProducts] = useDragAndDrop<
    HTMLUListElement,
    RelatedProduct
  >(products?.related ?? [], {
    group: 'A',
    multiDrag: enableRelated,
    draggingClass: 'kanban-drop-zone',
  });

return(
  <ul ref={related}>
    {relatedProducts.map((product, i) => (
      <li key={product.id}>
        <RelatedProductCard product={product} checkable={false} order={i + 1} />
      </li>
    ))}
  </ul>;
)

Result example:

I would appreciate it if you could replicate this problem and find out what is going on, thanks