【React × TypeScript × ESLint】props定義でMust use destructuring props assignmenteslintreact/destructuring-assignmentがでた

ESLintエラー本文：Must use destructuring props assignmenteslintreact/destructuring-assignment

このエラーの意味は

props.headerMenu1

とやっちゃだめ

headerMenu1

と書ける様に定義してね！というエラー

なので、以下の様にDestructureReactプロップオブジェクトを作りpropsを定義します

Header.tsx

type Props = { // ・・・・・・・・・・・・①
  headerMenu1: string;
  headerMenu2: string;
  headerMenu3: string;
};

const Header = (props: Props) => {
  const { headerMenu1, headerMenu2, headerMenu3 } = props; // ・・・・・・・・・・・・②
  return (
    <div className='relative bg-white'>
          <div className='hidden md:flex-1 md:flex md:items-center md:justify-end'>
            <Link href='/users/me'>
              <div className='flex items-center md:ml-12 mr-2'>
                <span className='text-sm font-semibold text-gray-700 hover:text-gray-900'>
                  {headerMenu1} // ・・・・・・・・・・・・③
                </span>
              </div>

①普通にpropsの型宣言
②宣言したpropsでDestructureReactプロップオブジェクトを作成
③DestructureReactプロップオブジェクト内のプロパティでpropsプロパティを定義

これにより、表題のESLintエラーは解消します

以上です