如何反转运行react-spring动画？

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

function ToggleAnimation() {
  const [toggle, setToggle] = useState(false);
  const props = useSpring({
    to: { transform: toggle ? 'translateY(0px)' : 'translateY(100px)' }
  });

  return (
    <div>
      <animated.div style={props} onClick={() => setToggle(!toggle)}>
        Click me to toggle!
      </animated.div>
    </div>
  );
}

export default ToggleAnimation;

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

function ToggleAnimation() {
  const [toggle, setToggle] = useState(false);
  const props = useSpring({
    to: { opacity: 1, color: 'red' },
    from: { opacity: 0, color: 'blue' },
    reverse: toggle
  });

  return (
    <div>
      <animated.div style={props} onClick={() => setToggle(!toggle)}>
        Click me to toggle!
      </animated.div>
    </div>
  );
}

export default ToggleAnimation;