Reactjs 如何正确使用带有clojurescript的挂钩？

我从以下链接复制clojurescript中的framer运动示例：

它使用挂钩和功能组件

export const Example = () => {

  const { scrollYProgress } = useViewportScroll();
  const yRange = useTransform(scrollYProgress, [0, 0.9], [0, 1]);
  const pathLength = useSpring(yRange, { stiffness: 400, damping: 90 });

  return (
    <>
      <ContentPlaceholder />
      <svg className="progress-icon" viewBox="0 0 60 60">
        <motion.path
          fill="none"
          strokeWidth="5"
          stroke="white"
          strokeDasharray="0 1"
          d="M 0, 20 a 20, 20 0 1,0 40,0 a 20, 20 0 1,0 -40,0"
          style={{
            pathLength,
            rotate: 90,
            translateX: 5,
            translateY: 5,
            scaleX: -1 // Reverse direction of line animation
          }}
        />

      </svg>
    </>
  );
};

然后使用这样的进度：

[：f>进度]

在另一个最终使用rdom渲染的组件中

但当我滚动时，什么也没发生。为什么会这样

(def div (.-div motion))
(def path (.-path motion))

(defn progress []
(let [
        scroll-y-progress (.-scrollYProgress (useViewportScroll))
        y-range (useTransform scroll-y-progress [0 0.9] [0 1])
        path-length (useSpring y-range {:stiffness 400 :damping 90})
        ]

     #js [y-range])

    [:> div (tw [:fixed :bg-white :bottom-0 :p-10 :border])
     [:svg (tw [:w-20 :h-20] {:viewBox "0 0 60 60"})
      [:> path {:fill "none"
                :strokeWidth "5"
                :stroke "black"
                :strokeDasharray "0 1"
                :d "M 0, 20 a 20, 20 0 1,0 40,0 a 20, 20 0 1,0 -40,0"
                :style
                {:pathLength path-length
                 :rotate 90
                 :translateX 5
                 :translateY 5
                 :scaleX -1}}]]]))