Remove spring from certian index instead of at the end with useSpring

[MonliH]

How can I remove a spring from a certain index with the useSprings hook? I'm trying to make a draggable list with items that can be added or removed, and the functionality (i.e. removal) works by setting the list of items as a dependency for the useSprings hook. When list length changes, the useSprings hook detects it and removes the spring with the last index. This makes some items suddenly jump to a different location because the last spring is not necessarily representative of the last list item; it's actually representative of the last inserted item. Instead, can I manually remove a spring (at a certain index, not the end) from the list of springs?

Is there a better way to implement this? I'm open to any new suggestions. I'm using this sandbox as a base and using a useTransition hook to make the removed objects fade away.

[myznikovgleb]

I've faced the same issue with jumping items after an item removal. I've solved it by shifting each spring api after the item removal. Below I provide a code snippet with solution

import { useSprings } from '@react-spring/web';

function MyComponent() {
  const [springs, api] = useSprings();

  const onAfterRemove = (indexRemoved) => {
    for (let i = indexRemoved; i < api.current.length - 1; i++) {
      api.current[i].set(api.current[i + 1].get());
    }
  };

  return /* */;
}

I guess adding that feature will provide a way more clear solution