requestAnimationFrame calculation speed does not catch up with scroll speed

I’m using requestAnimationFrame to simulate position fixed behavior.
I update top position of the element each time the scroll event fired

But when scrolling, I think requestAnimationFrame calculation speed does not catch up with scroll speed so, sometimes element is shifted out of the viewport.

Any suggestion for this

Here is my codesandbox:
https://codesandbox.io/s/staging-dream-93hg2r?file=/src/App.tsx