如何在使用react-spring更新文本时对其进行动画处理？

import React, { useState } from 'react';
import { useTransition, animated } from 'react-spring';

const TextAnimation = () => {
  const [text, setText] = useState('Hello World');
  
  const transitions = useTransition(text, null, {
    from: { opacity: 0, transform: 'translate3d(0, 50%, 0)' },
    enter: { opacity: 1, transform: 'translate3d(0, 0, 0)' },
    leave: { opacity: 0, transform: 'translate3d(0, -50%, 0)' },
  });
  
  const handleTextChange = () => {
    const newText = text === 'Hello World' ? 'Welcome!' : 'Hello World';
    setText(newText);
  }
  
  return (
    <div>
      {transitions.map(({ item, props }) => (
        <animated.h1 style={props}>{item}</animated.h1>
      ))}
      <button onClick={handleTextChange}>Toggle Text</button>
    </div>
  );
}

export default TextAnimation;