How to make smooth removal of an element from an array with react-spring?

Question

React

Made animated removal and appearance of array elements. But I do not know how to make the elements smoothly collapse when one of them is deleted. Here is a simple sandbox example.
https://codesandbox.io/s/throbbing-night-ytj1r?fil...

Answer 1

For example like this :

const transBoxes = useTransition(boxes, boxes => boxes, {
    from: { opacity: 0, width: 100, transform: "translateY(-100px)" },
    enter: { opacity: 1, transform: "translateY(0px)" },
    leave: [{ transform: "translateY(100px)", opacity: 0 }, { width: 0 }],
    config: {
      duration: 750
    }
  });