Set Eslint configurations to minimum in React

I need to change Eslint warnings. If there is a error, react will not render. I need to change that to just a warning message and render the application. Also use the auto formatting.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import eslint from "vite-plugin-eslint";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), eslint()],
});

Above code is included in vite.config.js

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
  settings: { react: { version: "18.2" } },
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
  },
};

This code is included in .eslintrc.cjs

In error it says

Click outside, press Esc key, or fix the code to dismiss. You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

You can try

    rules: {
    // ... your rules
  },
  overrides: [
    {
      files: ["*.js", "*.jsx", "*.ts", "*.tsx"],
      rules: {
        "react-refresh/only-export-components": [
          "warn",
          { allowConstantExport: true },
        ],
        // Add other rules you want to treat as warnings
      },
    },
  ],
  emitWarning: true, // Emit warnings instead of errors

Setting emitWarning to true ,it instructs ESLint to treat potential problems as warnings instead of errors, it allow your app to render while still highlighting issues for you to address.