如何在react spring中按顺序逐个运行动画

npm install react-spring

import { useSpring, useChain, animated } from 'react-spring';

const animations = [
  useSpring({ /* 第一个动画的配置 */ }),
  useSpring({ /* 第二个动画的配置 */ }),
  useSpring({ /* 第三个动画的配置 */ }),
  // ...
];

const elements = [
  useRef(),
  useRef(),
  useRef(),
  // ...
];

useChain(elements.map((_, index) => elements[index]), [0, 0.1, 0.2, ...]);

return (
  <div>
    <animated.div ref={elements[0]} style={animations[0]}>{/* 第一个元素的动画内容 */}</animated.div>
    <animated.div ref={elements[1]} style={animations[1]}>{/* 第二个元素的动画内容 */}</animated.div>
    <animated.div ref={elements[2]} style={animations[2]}>{/* 第三个元素的动画内容 */}</animated.div>
    {/* ... */}
  </div>
);