useImperativeHandleを使います

気付いてみれば当たり前のことですが、useImperativeHandleを使えばうまく実装することができます。
useRefで保持しているDOMノードを、useImperativeHandleを使ってフォワーディングします。

const RefSample = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
    // DOMノードを保持するref
    const inputRef = useRef<HTMLInputElement>(null);
    // useImperativeHandleでフォワーディング
    useImperativeHandle(ref, () => inputRef.current!);

    const focusHandler = useCallback(() => {
        inputRef.current?.focus();
    }, []);
    return (
        <div>
            <button onClick={focusHandler}>focus</button>
            <input ref={inputRef} type={"text"} />
        </div>
    );
});

これで、このコンポーネントを使う際にrefを渡すことができるようになります。

const App = () => {
    const ref = useRef<HTMLInputElement>(null);
    const blurHandler = useCallback(() => {
        ref.current?.blur();
    }, []);
    return (
        <div>
            <RefSample ref={ref} />
            <button onClick={blurHandler}>blur</button>
        </div>
    );
};

補足: useImperativeHandleについて

useImperativeHandleの第2引数には関数を渡しますが、この関数がいつ実行されるのか公式ページには載っていないようなので、軽く調査しました。
どうやら、HTMLのレンダリングが終了してから、useLayoutEffectに渡した関数が呼び出されるまでの間のタイミングで、かつReactのUIツリーの末端にあるエレメントから実行されていくようです。

【React】useRefとforwardRefを両立する方法【関数コンポーネント】

useImperativeHandleを使います

補足: useImperativeHandleについて

関連