当使用React spring和可见性传感器滚动时，我正在尝试转换导航栏的不透明度

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

const Navbar = () => {
  const [ref, inView] = useInView({
    triggerOnce: true, // 仅触发一次
    threshold: 0.5, // 当导航栏可见度达到50%时触发
  });

  const navbarAnimation = useSpring({
    opacity: inView ? 1 : 0, // 根据可见性传感器的状态设置不透明度
  });

  return (
    <animated.nav style={navbarAnimation} ref={ref}>
      {/* 导航栏内容 */}
    </animated.nav>
  );
};

const App = () => {
  return (
    <div>
      {/* 其他内容 */}
      <Navbar />
      {/* 其他内容 */}
    </div>
  );
};