.prettierrc config does not work in create-react-app project

I started a project with create-react-app. Then, wanted to extend the built-in eslint config with prettier. However, the config from .prettierrc does not apply to linting rules. For example, I want to have 4 indent, but the eslint still applies 2 indentation. Here are my package.json file and prettier configs. Can anyone help me to solve the issue?

package.json:

    {
      "name": "weather-app",
      "version": "0.1.0",
      "private": true,
      "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"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest",
          "plugin:prettier/recommended"
        ]
      },
      "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-config-prettier": "^8.1.0",
        "eslint-plugin-prettier": "^3.3.1",
        "prettier": "^2.2.1"
      }
    }

.prettierrc:

{
  "semi": false,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 4
}