Your flat config has some issues, so let's go one by one:

1. You're missing an import at the top:

import js from '@eslint/js';

Since you're using the following rules: ...js.configs.recommended.rules.

2. You're importing eslint-plugin-react twice, this isn't an error but it's better to just import it once.

3. The last line where you're extending the config pluginReact.configs.recommended will not work because it has an older format for plugins. Considering how you already have the plugins and parserOptions manually added onto your config, you should probably just extend the rules:

rules: {
  ...react.configs.recommended.rules
}

4. The error you're facing is actually documented here, it is a known issue with eslint-plugin-import when using the import/no-unused-modules rule. You can fix it by adding an empty .eslintrc file in your project.

Finally, your config could look like this:

import js from '@eslint/js';
import globals from "globals";
import { defineConfig } from "eslint/config";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import prettier from "eslint-plugin-prettier";
import importPlugin from "eslint-plugin-import";
import react from "eslint-plugin-react";
import jsxA11y from "eslint-plugin-jsx-a11y";

export default defineConfig([
  { ignores: ["dist"] },
  {
    files: ["**/*.{js,mjs,cjs,jsx}"],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: "latest",
        ecmaFeatures: { jsx: true },
        sourceType: "module",
      },
    },
    plugins: {
      "react-hooks": reactHooks,
      "react-refresh": reactRefresh,
      prettier,
      import: importPlugin,
      react,
      "jsx-a11y": jsxA11y,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      // "no-unused-vars": ["error", { varsIgnorePattern: "^[A-Z_]" }],
      // "no-undef": ["error", { globals: { process: true } }],
      // Vite React specific
      "react-refresh/only-export-components": [
        "warn",
        { allowConstantExport: true },
      ],

      // Your custom rules from old config
      "prettier/prettier": "off",
      "no-nested-ternary": "off",
      "no-underscore-dangle": "off",
      "default-param-last": "off",
      "prefer-arrow-callback": "error",
      camelcase: ["error", { properties: "never", ignoreDestructuring: true }],
      "no-else-return": ["error", { allowElseIf: true }],
      "no-param-reassign": ["error", { props: false }],

      // Import rules
      "import/no-extraneous-dependencies": [
        "error",
        {
          devDependencies: false,
          optionalDependencies: false,
          peerDependencies: false,
        },
      ],
      "import/order": [
        "error",
        {
          pathGroups: [
            {
              pattern: "react",
              group: "external",
              position: "before",
            },
          ],
          pathGroupsExcludedImportTypes: ["builtin"],
        },
      ],
      "import/no-unused-modules": ["error", { unusedExports: true }],

      // React rules
      "react/require-default-props": "off",
      "react/jsx-no-undef": ["error", { allowGlobals: true }],
      "react/jsx-uses-vars": "error",
      ...react.configs.recommended.rules,

      // Best Practices
      eqeqeq: "error",
      "no-invalid-this": "error",
      "no-return-assign": "error",
      "no-unused-expressions": ["error", { allowTernary: true }],
      "no-useless-concat": "error",
      "no-useless-return": "error",
      "no-use-before-define": "error",
      "no-duplicate-imports": "error",
      "no-plusplus": ["error", { allowForLoopAfterthoughts: true }],

      // Variable and import rules
      "no-undef": "error",
      "no-unused-vars": [
        "error",
        {
          vars: "all",
          args: "after-used",
          ignoreRestSiblings: true,
          varsIgnorePattern: "^[A-Z_]", // Keep the pattern from new config
        },
      ],
    },
    settings: {
      react: {
        version: "detect",
      },
    },
  },
]);