React.forwardRefでReact.FCを受け取る方法

Question

複数のコンポーネントに対し、ホバーしたときに共通の処理を行う必要があり、以下のように実装しました。
しかし、Heading01のようにReact.FC型を指定した関数コンポーネントについては、TypeScriptのエラーが発生してしまいます。

const Heading01: React.FC = ({ children }, ref: any) => (
  <h1 ref={ref}>{children}</h1>
)
const FowardedHeading01 = React.forwardRef(Heading01)
// ->  'FC<{}>' の引数を型 'ForwardRefRenderFunction<unknown, {}>' のパラメーターに割り当てることはできません。

const Heading02 = ({ children }: { children: React.ReactNode }, ref: any) => (
  <h1 ref={ref}>{children}</h1>
)
const FowardedHeading02 = React.forwardRef(Heading02)
// -> OK

こちらの解決方法をご存知の方がいらっしゃいましたら、ご教授いただけると幸いです。
どうしようもない場合はrefをpropsとして渡すことで解決しようとは思いますが、
可能な限りforwardRefを用いて対応できればと考えております。

各パッケージのバージョン

react: "^16.12.0"
react-dom: "^16.12.0"
typescript: "^3.9.2"
@types/react: "^16.9.35"
@types/react-dom: "^16.9.8"

Answer 1

Heading01のようにReact.FC型を指定した関数コンポーネントについては、TypeScriptのエラーが発生してしまいます。

エラーメッセージのとおり、React.forwardRefに指定する関数コンポーネントについては、通常のReact.FCとシグネチャが異なりますので、専用のForwardRefRenderFunction型を使う必要があります。

Comments

[cooper46]

ご回答ありがとうございます！
ご教示いただいた内容を参考に、以下のようにアサーションしたところ動くようになりました。

const FowardedHeading01 = React.forwardRef(Heading01)
↓
const ForwardedHeading01 = React.forwardRef(Heading01 as React.ForwardRefRenderFunction<HTMLHeadingElement, { children?: React.ReactNode }>)