memoとforwardrefを一気に定義してpropsを参照しようとあれこれするとESLintでエラーにされてしまう

こんにちは。
今日のサザエさんは、Reactのfunction componentをforwardRef -> memoとしたときに、コンポーネント中でpropsの各プロパティを使おうとするとESLintによってエラー扱いされてしまって困った話です。

TL;DR

イッキはダメよ。
forwardRefとmemoの定義を別にします。
うん、わからんですね。

forwardRefとmemoを一気に定義すると…

function componentに対してforwardRefとmemoを一気に定義したときに

const Component = memo(forwardRef<Handles, Props>((props: Props, ref) => {
  // このprops.fooがESLintで「'foo' is missing in props validation eslint(react/prop-types)」に
  props.foo.map((f) => {
    ...

こんな感じでpropsのプロパティを参照しようとしただけでESLintに怒られちゃいます。
GitHubにもissueは上がってるのですがCloseされちゃってます。

エラーにされないパターン

ちなみにprops自体を書くだけではエラーになりません。
エラーメッセージの内容としては妥当ですね。

const Component = memo(forwardRef<Handles, Props>((props: Props, ref) => {
  // これはプロパティを参照してないからエラーにはならない
  const foo = f(props);
    ...

回避策

これを回避する苦肉の策として、一旦forwardRefだけで定義した後、memoにする形で再定義します。

// forwardRefだけした定義
const ComponentA = forwardRef<Handles, Props>((props: Props, ref) => {
  // 略
});

// forwardRefしたものをmemo
export const Component = memo(ComponentA);

Issueでは放置されてる気がするけど改修されないかなぁ。