Prettier configured with Eslint giving error in quotes even when `singleQuotes` set to true

This is my .eslintrc.json file for the react app.

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": ["react-app", "prettier"],
    "parserOptions": {
        "ecmaVersion": 12
    },
    "plugins": ["react", "prettier"],
    "rules": {
        "prettier/prettier": [
            "warn",
            {
                "singleQuote": true,
                "trailingComma": "es5",
                "jsxBracketSameLine": true,
                "useTabs": true
            }
        ],
        "arrow-body-style": "off",
        "prefer-arrow-callback": "off",
        "quotes": ["error", "single"]
    }
}

These are my dependencies in package.json file (this is not full code of the file, only dependencies)

{
    "dependencies": {
        "@testing-library/jest-dom": "^5.11.4",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "4.0.3",
        "web-vitals": "^1.0.1"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "4.22.0",
        "@typescript-eslint/parser": "4.0.0",
        "eslint-config-prettier": "^8.2.0",
        "eslint-config-react-app": "6.0.0",
        "eslint-plugin-flowtype": "5.2.0",
        "eslint-plugin-import": "2.22.0",
        "eslint-plugin-jest": "24.0.0",
        "eslint-plugin-jsx-a11y": "6.3.1",
        "eslint-plugin-prettier": "^3.4.0",
        "eslint-plugin-react": "7.20.3",
        "eslint-plugin-react-hooks": "4.0.8",
        "eslint-plugin-testing-library": "3.9.0",
        "install-peerdeps": "^3.0.3",
        "prettier": "^2.2.1",
        "typescript": "^4.2.4"
    }
}

I am facing error that even though singleQuote of prettier is set to true. Even for eslint, I have set quote as single.

My VS code settings for prettier-

Solution

See the docs: https://prettier.io/docs/en/options.html#quotes

It specifically states "JSX quotes ignore this option – see jsx-single-quote."

Set jsxSingleQuote to true