为什么我的元素在离开之前被延迟了，并且没有使用React-Spring在转换组件中进行动画处理？

.element {
  transition: all 0.3s ease-out; /* 确保没有delay */
}

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

function MyComponent() {
  const props = useSpring({ opacity: 0, from: { opacity: 1 }, config: { duration: 300 } });

  return (
    <animated.div style={props}>
      I will fade out
    </animated.div>
  );
}

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

function MyComponent() {
  const props = useSpring({ opacity: 0, from: { opacity: 1 }, config: { duration: 300 } });

  useEffect(() => {
    return () => {
      // 组件卸载时触发动画
      props.start();
    };
  }, [props]);

  return (
    <animated.div style={props}>
      I will fade out
    </animated.div>
  );
}