React Element Sometimes Returns Null and Other Times current: HTMLDivElement

I’m building a tooltip component, which has a trigger element and the tooltip, and want to to position the tooltip based on where it is in relation to the browser window.

To do this correctly, I’ll need to get info on both trigger element and the tooltip. I’m able to get info on the trigger but for some reason the tooltip element returns null and sometimes actually returns the element.

See this codesandbox. As you can see on line 114, I’m console logging tooltipRef. If you hover of “trigger” text, and check the console, you’ll notice at times {current: HTMLDivElement} is returned, and other times {current: null}.

What do I need to do to consistently get {current: HTMLDivElement} returned?