Eslint & Prettier conflicts

Question

I am new in eslint and prettier. I have this simple example, when i use "tabWidth": 4 in .prettierrc.json file. i saw error.I order to not have conflicts between them, i installed the eslint-config-prettier. But i still get errors.

Files:

1. App.js

import React, { useState } from "react";
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);

const lea = 15;

const loginHandler = (email, password) => {
    setIsLoggedIn(true);
};

const logoutHandler = () => {
    setIsLoggedIn(false);
};

return (
    <>
        <MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
        <main>
            {!isLoggedIn && <Login onLogin={loginHandler} />}
            {isLoggedIn && <Home onLogout={logoutHandler} />}
        </main>
    </>
);}

export default App;

2. .eslintrc.json

{
"env": {
    "browser": true,
    "es2021": true
},
"extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended",
    "eslint:recommended",
    "prettier"
],
"parserOptions": {
    "ecmaFeatures": {
        "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
},
"parser": "babel-eslint",
"plugins": ["react", "prettier"],
"rules": {
    "prettier/prettier": ["error"]
}}

3. .prettierrc.json

{
"arrowParens": "always",
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 86,
"proseWrap": "preserve",
"quoteProps": "preserve",
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 4,
"trailingComma": "es5",
"useTabs": false,
"vueIndentScriptAndStyle": false}

4. package.json

{
"name": "react-complete-guide",
"version": "0.1.0",
"private": true,
"dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.5.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
},
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},
"eslintConfig": {
    "extends": [
        "react-app",
        "react-app/jest"
    ]
},
"browserslist": {
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ],
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
    ]
},
"devDependencies": {
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "^2.4.1"
}}

5. error image enter image description here