IntersectionObserverEntry is undefined until element is in view

[maximilian-franz]

I have a setup using the useInView hook where I have multiple elements that I want to track and be able to scroll to via some buttons:

const {ref: refA, inView: aInView, entry: entryA} = useInView();
const {ref: refB, inView: bInView, entry: entryB} = useInView();
const {ref: refC, inView: cInView, entry: entryC} = useInView();
...
<button onClick={() => entryA.target.scrollIntoView()}>Go to A</button>
<button onClick={() => entryB.target.scrollIntoView()}>Go to B</button>
<button onClick={() => entryC.target.scrollIntoView()}>Go to C</button>
...
<div ref={refA}>...</div>
<div ref={refB}>...</div>
<div ref={refC}>...</div>

This worked fine until the release of V10.0.0, since which the behavior of useInView changed so that the first notification from the IntersectionObserver is ignored. This has the effect that the returned entry is undefined until the targeted element has been scrolled into view, which breaks the setup above. Since the returned refs aren't actual ref objects and don't have a current attribute, is there another way to get a reference to the target element initially?

[thebuilder]

I would assign my own ref to the div, instead of relying on the entry. The ref can be merged with the one from useInView.