reactjs - forwardRef（TypeScript使用時）でEslintが奇妙に動作する

TypeScriptでforwardRefを動作させようとしているのですが、eslintが「'handleNext' がプロップスの検証に存在しません eslint (react/prop-types)」という奇妙なエラーを出しています。

コード

import {StepProps, ValidationHandleWithSave} from '../Interfaces';

export const EsButton = forwardRef<ValidationHandleWithSave, StepProps>(function EsButton(props, ref) {
  const {handleNext} = props;

  return (
    <>
      {/* CONTENT OMITTED */}
    </>
  );
});

インターフェース

export interface StepProps {
  handleNext?: () => void;
}

export interface ValidationHandleWithSave {
  saveChanges: () => void;
  validate: () => Promise<boolean>;
}

上のコードでは、エラー「'handleNext' は props のバリデーションに存在しません eslint (react/prop-types)」が出ますが、奇妙なことにインテリセンスは型を正しく認識しています。handleNext 関数は、ユーザーが次のページに進みたいことを親コンポーネントに知らせるために必要です（ウィザードフロー）。このコードを実行しても動作するので、コード自体は問題ないと思われますが、eslint がそれを不満に思っているだけです。

動作する例

不思議なことに、コンポーネントのファイル内に2つのインターフェースを置くと、eslintは文句を言わなくなる。

interface StepProps {
  handleNext?: () => void;
}

interface ValidationHandleWithSave {
  saveChanges: () => void;
}

export const EsButton = forwardRef<ValidationHandleWithSave, StepProps>(function EsButton(props, ref) {
  const {handleNext} = props;

  return (
    <>
      {/* CONTENT OMITTED */}
    </>
  );
});

これは動作しますが、インターフェースが複数のコンポーネントで必要なため、別のフォルダに配置したいです。

なぜ最初の例が私のところでうまくいかないのか、何か心当たりはありますか？

編集

props.handleNext を直接使った例

export const EsButton = forwardRef<ValidationHandleWithSave, StepProps>(function EsButton(props, ref) {
  const func = props.handleNext;

  return (
    <>
      {/* CONTENT OMITTED */}
    </>
  );
});

まだ同じeslintのエラーが出ているようです。また、eslintが型を読み取れるように関数をEsButton(props: StepProps, ref)に変更しても、役に立ちませんでした。