I just started learning to use react-spring. Then I set up the array’s appearance and disappearance animation effects, but there was a problem.

When I remove the element in the middle of the array, the elements below do not have a smooth upward animation effect, but appear instantly.

How should I add a moving up animation effect?

"use client";

import React, {memo, useEffect, useState} from 'react'
import {animated, useTransition} from "@react-spring/web";


const Test = () => {

  const [items, setItems] = useState<string[]>(["1", "2", "3", "4", "5", "6"]);

  const removeItem = () => {
    if (items.length === 0) return;
    // const newItems = items.slice(1, 3);
    const newItems = ["1", "2", "5", "6"]
    setItems(newItems);
  };

   const transitions = useTransition(items, {
    from: {opacity: 0, transform: "translate3d(0, 100dvw, 0)"},
    enter: {opacity: 1, transform: "translate3d(0, 0, 0)"},
    leave: {opacity: 0, transform: "translate3d(200dvw, 0, 0)"},
    trail: 50,
    config: {duration: 2000}
  });

  return (
    <div>
      <div>      
        <button onClick={removeItem}>Remove Item</button>    
      </div>
      <div>
        {transitions((style, item) => (
          <animated.div style={style}>
            <div style={{
              height: "10dvh",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              color: "white",
              fontSize: "20px",
              backgroundColor: "red"
            }}>
              {item}
            </div>
          </animated.div>
        ))}
      </div>
    </div>
  );
}

export default memo(Test)