How to make smooth removal of an array element with framer-motion?

Question

React

I made an animation of removal from the array, but it does not work correctly. Shows the removal animation of the last element.
Here's a simple layout I made for ease of viewing.
https://codesandbox.io/s/awesome-edison-75p4t?file...
I would also like to implement a smooth replacement of the deleted element, and not just an unanimated shift.

Answer 1

it turned out like this, I added a timeout to the Box so that it had time to animate before deleting
https://codesandbox.io/s/angry-payne-j0nhi

Shows the removal animation of exactly the last element

because here key=index shifted by one when removed, was not "unique for the block", but depended on the position in the array

{boxes.map((item, index) => (
  <Box key={index} item={item} onDelete={onDelete} />
 ))}