ESLlint `no-unused-vars` has false positive on React components

I migrated to the newest version of ESLint and I get false positive errors on React components. Meanwhile I use all of them in the current file:

In the "extends" section I have the default "no-unused-vars" through pluginEslintJs/recommended, but if I add the "no-unused-vars" explicitly to the "rules", the problem still persists. I would like to use the "no-unused-vars" - it is mandatory to me - but the rule is not working as expected.

My eslint.config.mjs:

import { defineConfig } from 'eslint/config';
import globals from 'globals';
import pluginEslintJs from '@eslint/js';
import pluginStylisticJs from '@stylistic/eslint-plugin-js';
import pluginStylisticJsx from '@stylistic/eslint-plugin-jsx';

/**
 * @see https://eslint.org/docs/latest/rules
 * @see https://eslint.style/rules
 */
export default defineConfig([
  {
    files: ['**/*.{js,mjs,cjs,jsx,ts,tsx}'],
    plugins: {
      pluginEslintJs,
      '@stylistic/js': pluginStylisticJs,
      '@stylistic/jsx': pluginStylisticJsx,
    },
    extends: [
      'pluginEslintJs/recommended',
    ],
    languageOptions: { globals: globals.browser },
  },
  {
    rules: {
      'yoda': ['error', 'always'],
      '@stylistic/js/semi': 0,
      '@stylistic/js/comma-dangle': [1, {
        arrays: 'only-multiline',
        objects: 'only-multiline',
        imports: 'only-multiline',
        exports: 'only-multiline',
        functions: 'only-multiline',
      }],
      '@stylistic/js/operator-linebreak': ['error', 'before'],
      '@stylistic/js/indent': ['error', 2, { SwitchCase: 1 }],
      '@stylistic/js/space-before-function-paren': ['error', {
        anonymous: 'never',
        named: 'never',
        asyncArrow: 'always',
      }],
      '@stylistic/js/arrow-parens': ['error', 'as-needed', {
        'requireForBlockBody': false,
      }],
      '@stylistic/js/arrow-spacing': ['error', {
        'before': true,
        'after': true,
      }],
      '@stylistic/js/no-mixed-spaces-and-tabs': 1,
      '@stylistic/jsx/jsx-closing-bracket-location': 1,
      '@stylistic/jsx/jsx-closing-tag-location': 1,
      '@stylistic/jsx/jsx-curly-brace-presence': [1, 'never'],
      '@stylistic/jsx/jsx-curly-spacing': 1,
      '@stylistic/jsx/jsx-equals-spacing': 1,
      '@stylistic/jsx/jsx-first-prop-new-line': [1, 'multiline-multiprop'],
      '@stylistic/jsx/jsx-indent': [1, 2, {
        checkAttributes: true,
        indentLogicalExpressions: true,
      }],
      '@stylistic/jsx/jsx-pascal-case': [1, {
        allowAllCaps: false,
        allowNamespace: true,
        allowLeadingUnderscore: false,
      }],
      '@stylistic/jsx/jsx-props-no-multi-spaces': 1,
      '@stylistic/jsx/jsx-self-closing-comp': ['error', {
        'component': true,
        'html': true,
      }],
      '@stylistic/jsx/jsx-wrap-multilines': [1, {
        'declaration': 'parens-new-line',
        'assignment': 'parens-new-line',
        'return': 'parens-new-line',
        'arrow': 'parens-new-line',
        'condition': 'ignore',
        'logical': 'parens-new-line',
        'prop': 'parens-new-line',
        'propertyValue': 'parens-new-line',
      }],
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
  },
]);

In the legacy eslint-plugin-react I could extend the settings like this:

export default defineConfig([
   ...
   pluginReact.configs.flat.recommended,
])

In this version of ESLint may I have to add the @stylistic/eslint-plugin-jsx to the extends but I could not find the docs, and nothing worked for me what I tried. And maybe, I am on a wrong way.

What have I miss? What should I configure to make it correct?

After that issue, I had time again for this today. And I solved it. The eslint-plugin-react already supports the new config format of eslint.

So, You have to install the eslint-plugin-react w/ e.g. pnpm.

$ pnpm add eslint-plugin-react -D

and extend the package.json

import pluginEslintReact from 'eslint-plugin-react';

...

export default defineConfig([
  {
    files: ['**/*.{js,mjs,cjs,jsx,ts,tsx}'],
    plugins: {
      ...
      pluginEslintReact,
    },
    ...
  },
]);
...

And the last piece of the puzzle is the recommended rules from the lib. (What is discussed here.) That should be implemented this way:

import pluginEslintJs from '@eslint/js';
import pluginEslintReact from 'eslint-plugin-react';

...

export default defineConfig([
  {
    extends: [
      pluginEslintJs.configs.recommended,
      pluginEslintReact.configs.flat.recommended,
    ],
    ...
  },
]);