複数のコンポーネントに対し、ホバーしたときに共通の処理を行う必要があり、以下のように実装しました。
しかし、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"

#react #programming