[BUG] useIntersectionObserver loses ref node access since v3

[tengweiherr]

Describe the bug

Since the breaking change in the useIntersectionObserver hook in v2.13.0, we no longer have to pass a ref to the hook. Instead, it exports the callback ref for us to bind to the DOM node. I understand that the reason behind the change is to address the issue described here. However, using the callback ref loses the ref node access at the same time.

To Reproduce

We have a use case where we track the position of a div container and only render its children when the container enters the viewport. (I believe this optimization technique is called above-the-fold).

This custom hook was built on top of the useIntersectionObserver hook before v2.13.0

export const useInViewOnce = () => {
  const ref = useRef(null)

  const entry = useIntersectionObserver(ref, {
    rootMargin: `0px 0px`,
    freezeOnceVisible: true,
  })

  const isVisible = !!entry?.isIntersecting

  useEffect(() => {
    if (!ref.current) return
    ref.current.style.height = isVisible ? 'auto' : `500px`
  }, [isVisible])

  return { ref, hasEnteredView: isVisible }
}

Use case

const { ref, hasEnteredView } = useInViewOnce<HTMLDivElement>()

<div ref={ref}>
    {hasEnteredView && <ChildrenComponents />}
</div>

The same function is not achievable with the latest version of usehooks-ts as we lose access to the ref node

Expected behavior

It provides us access to the ref node in the onChange callback function

Additional context

Since the intention here is to have some side effects on the ref node itself when it is intersecting, I recommend passing the ref node in the onChange callback so we can have access to the reference node properties.