New text appears in the middle rather than sliding up from the bottom

[YuliyaMinsk]

Hello guys, I'm implementing a text slider using @react-spring/web where each slogan should slide up from below the visible area into the center and then continue sliding up until it exits the visible area, making room for the next slogan. I've configured the useTransition hook to animate the entrance and exit of each slogan based on an array of items.

The exit animation works as expected, with the current slogan sliding up and fading out correctly. However, the problem arises with the entrance animation of each new slogan: instead of sliding up from the bottom, each new slogan seems to abruptly appear or "fade in" at the center without the intended sliding motion from below.

const slogans = [
  '5,680 happy clients',
  'more than 5,000 checks a day',
  'more than 25,000 successful transactions a day',
];

const HeroBlock: FC = () => {
  const [index, setIndex] = useState(0);

  const transitions = useTransition(index, {
    from: { opacity: 0, transform: 'translateY(100%)' },
    enter: { opacity: 1, transform: 'translateY(0%)' },
    leave: { opacity: 0, transform: 'translateY(-100%)' },
    config: { duration: 1000 },
  });

  useEffect(() => {
    const interval = setInterval(() => {
      setIndex((current) => (current + 1) % slogans.length);
    }, 3000);

    return () => clearInterval(interval);
  }, []);

  return (
      <div className="container mx-auto p-4">
          <div className="text-primary-white text-xl mb-[99px] h-[28px] overflow-hidden">
            {transitions((style, i) => (
              <animated.p style={style}>{slogans[i]}</animated.p>
            ))}
          </div>
       </div>
  );
};

export { HeroBlock };

The expected behavior is for each slogan to smoothly transition into view from the bottom, but currently, they seem to just "pop up" or fade in without moving upwards from below. Could anyone suggest what might be causing this issue or how to ensure the new slogan animates into view from the bottom as intended?