Radix Dialog に自前コンポーネントを使うと Function components cannot be given refs. が出る

起きていた事象

詳細をちょっと書くと Radix UIを使用してDialogを実装していて、その子コンポーネントに自作コンポーネントを使用していた場合

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

のエラーが発生していました。

関数コンポーネントにrefsを渡せないということと、React.ForwardRefを使ってエラーを回避する方法が検索でヒットします。

検索でヒットした通り修正しようかと思い色々確認していたのですが、肝心のrefを関数コンポーネントに渡している記述がありませんでした🤔

修正

色々ググっていくと最終的には、Radix UIの公式サイト見るとヒントになる記述がありました。

www.radix-ui.com

Additionally, Radix will sometimes need to attach a ref to your component (for example to measure its size). If your component doesn't accept a ref, then it will break.

• Radixは、コンポーネントにrefを添付する必要がある。
• コンポーネントがrefを受け付けない場合、それは壊れる。

と書いてあります。

自作の関数コンポーネントは、そもそもrefを渡していなかったので渡す様に変更して、かつReact.ForwardRef を使って修正したところエラーは消えました。