How can I get a derived value from a SpringValue?

[takeItIzzy]

I have a draggable table, and I want the header sticky:

const { y, api } = useSpring(() => ({ y: 0 }))

const bind = useDrag(/* update `y` to drag the table */)

return (
    // wrapper
    <div className="overflow-hidden relative">
      {/* table */}
      <animated.div {...bind()} style={{ y }}>
        {/* header */}
        <animated.div style={{ transform: `translateY(${-y.get()}px)` }} />
    
        {/* other cells */}
      </animated.div>
    </div>
)

I want to do some complex animations when dragging，so I use use-gesture instead of scroll events.

Since the transform: translate3d has been applied to the table, the position: sticky on the header won't work. So I want to get -y to balance the y of table, but the code above won't work.

Is there a way to implement this? Or is there some better implements?

[takeItIzzy]

I found solution:

{/* header */}
<animated.div style={{ y: y.to((v)) => -v }} />

But I still wonder if it is the best practice that set -y to balance y.