I need to migrate the legacy ESLint configuration to new flat config version for React JS & TS project. There are problems when I attempt to convert first override for .ts, .tsx.

.eslintrc

{
  "plugins": ["jest", "jest-dom", "react-hooks", "@next/next", "@typescript-eslint", "prettier", "testing-library"],
  "ignorePatterns": "./eslint-rules/",
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "prettier"
  ],
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "legacyDecorators": true
    },
    "babelOptions": {
      "configFile": "./config/.babelrc"
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "globals": {
    "document": true,
    "window": true,
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".jsx", ".js", ".tsx", ".ts"]
      },
      "typescript": {
        "alwaysTryTypes": true,
        "project": "./tsconfig.json"
      }
    }
  },
  "overrides": [
    {
      // here the main problem
      "files": ["**/*.{ts,tsx}"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "ecmaFeatures": {
          "jsx": true
        },
        "ecmaVersion": 2020,
        "sourceType": "module",
        "project": ["./tsconfig.json", "./e2e/tsconfig.json"]
      },
      "globals": {
        "React": true,
        "JSX": true
      },
      "extends": [
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
        "plugin:react/recommended",
      ],
      "rules": {
        "react/require-default-props": "off"
      }
    }
  ]
}

So, this is what I came up with:

eslint.config.mjs:

export default [
{
    plugins: {
      "jest": jestPlugin,
      "jest-dom": jestDomPlugin,
      "@testing-library": testingPlugin,
    },
    languageOptions: {
      parser: babelParser,
      ecmaVersion: 6,
      sourceType: "module",
      globals: {
        ...globals.browser,
        ...globals.es5,
        ...globals.node,
        SharedArrayBuffer: 'readonly',
        Atomics: 'readonly',
        window: true,
        document: true,
      },
      parserOptions: {
        babelOptions: {
          configFile: './config/.babelrc'
        },
        ecmaFeatures: {
          jsx: true,
          legacyDecorators: true
        }
      }
    },
    settings: {
      'import/resolver': {
        node: {
          extensions: ['.jsx', '.js', '.tsx', '.ts']
        },
        typescript: {
          alwaysTryTypes: true,
          project: './tsconfig.json'
        }
      }
    }
  },
  ...tseslint.config(
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
    ...tseslint.configs.recommendedTypeChecked,
    {
      ignores: ['**/*.{js,jsx}', 'config/*.js', "./deploy.js"],
      languageOptions: {
        parserOptions: {
          project: ['./tsconfig.json'],
          tsconfigRootDir: import.meta.dirname,
        },
      },
      rules: {
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": ["error"],
        "react/require-default-props": "off"
      }
    }
  ),
]

However, I face this error:

Oops! Something went wrong! :(

ESLint: 9.3.0

Error: Error while loading rule '@typescript-eslint/await-thenable': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Parser: undefined
Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.