useState as a Callback Ref to Trigger Effects on DOM Availability

useRef triggers a re-render internally, but only after a one-render delay, so the fix is purely about timing rather than mechanism.

Mutating a ref object's .current property does not cause a re-render or re-run any effect, since refs are explicitly excluded from React's reactivity; passing a state setter as the ref callback instead makes React call it with the DOM node on mount, which updates state and re-renders, letting a dependent effect see the node in its dependency array.

Callback refs are called before the component mounts, so only they have access to the real DOM node at all — object refs never receive a populated .current value.

State setters passed as refs are automatically debounced by React to prevent excessive re-renders during mount.