react-hook-formとuseRefを併用したい

経緯

RHFはinputにrefを渡す必要があるが、独自にrefを渡したい場合、1つのコンポーネントに複数のrefを渡す必要があるので困っていた。

結論

公式ドキュメントに書いてあった

解説

ポイントは2箇所

1.refはコールバックにできた

<input {...rest} name="firstName" ref={(e) => {
	ref(e)
	firstNameRef.current = e // you can still assign to ref
}} />

2.nullとのUnionにすることで、currentプロパティがreadonlyではなくなる。

const firstNameRef = useRef<HTMLInputElement | null>(null);