如何使用react-spring滚动到元素？

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

const ScrollToElement = ({ targetId }) => {
  const targetRef = useRef(null);
  const [springProps, set] = useSpring(() => ({
    offset: 0,
    config: { tension: 280, friction: 60 }
  }));

  const scrollToElement = () => {
    if (targetRef.current) {
      const targetElement = targetRef.current;
      const offsetTop = targetElement.offsetTop;
      set({ offset: offsetTop });
    }
  };

  return (
    <div>
      <button onClick={scrollToElement}>Scroll to Element</button>
      <animated.div
        style={{
          transform: springProps.offset.interpolate(offset => `translateY(-${offset}px)`)
        }}
      >
        <div ref={targetRef} style={{ marginTop: '100vh' }}>
          Target Element
        </div>
      </animated.div>
    </div>
  );
};

export default ScrollToElement;