Независимое перетаскивание элементов на новые позиции с помощью хука useSprings (+useDrag)

Я ожидал, что каждый элемент будет обновляться независимо, в соответствии с его последним позиционированием. Однако перемещение элемента после перемещения другого приводит к нежелательному поведению.

export function Ingredients({ ingredients }: IngredientsProps) {
 const [springs, api] = useSprings(ingredients.length, () => ({
 x: 0,
 y: 0,
 }));
 const bind = useDrag(({ args: [originalIndex], offset: [ox, oy] }) => {
 api.start((index) => {
 if (index!== originalIndex) return;
 return {
 x: ox,
 y: oy,
 };
 });
 });
 return (
 <>
 {springs.map(({ x, y }, i) => (
 <Ingredient key={ingredients[i].name} {...bind(i)} style={{ x, y }}>
 <img
 src={ingredients[i].src}
 alt={ingredients[i].name}
 draggable="false"
 ></img>
 </Ingredient>
 ))}
 </>
 );
}

Решение проблемы

Добавитьfrom свойство к общим параметрам:

export function Ingredients({ ingredients }: IngredientsProps) {
 const [springs, api] = useSprings(ingredients.length, () => ({
 x: 0,
 y: 0,
 }));
 const bind = useDrag(({ args: [originalIndex], offset: [ox, oy] }) => {
 api.start((index) => {
 if (index!== originalIndex) return;
 return {
 x: ox,
 y: oy,
 };
 });
 },
 {
 from: ({args: [originalIndex]}) => [
 springs[originalIndex].x.get(),
 springs[originalIndex].y.get()
 ],
 });
 return (
 <>
 {springs.map(({ x, y }, i) => (
 <Ingredient key={ingredients[i].name} {...bind(i)} style={{ x, y }}>
 <img
 src={ingredients[i].src}
 alt={ingredients[i].name}
 draggable="false"
 ></img>
 </Ingredient>
 ))}
 </>
 );
}