Trouble configuring ESLint v9 with React and TypeScript [duplicate]

import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh'; // Make sure to import all plugins

export default [
  {
    ignores: ['dist'],
    overrides: [
      {
        extends: [
          js.configs.recommended,
          'eslint:recommended',
          'plugin:@typescript-eslint/recommended',
          'plugin:react-hooks/recommended',
          'plugin:react/recommended',
          'plugin:react/jsx-runtime',
          'prettier', // `eslint-config-prettier` is usually just referred to as `prettier`
        ],
        files: ['**/*.{ts,tsx}'],
        languageOptions: {
          ecmaVersion: 2021,
          globals: globals.browser,
        },
        plugins: ['react-hooks', 'react-refresh'], // Ensure all plugins are listed here
        rules: {
          ...reactHooks.configs.recommended.rules,
          'react-refresh/only-export-components': [
            'warn',
            { allowConstantExport: true },
          ],
        },
      },
    ],
  },
];