There are a number of ways to set up prettier to work with eslint and it can be confusing.

To run prettier as an eslint rule, you would want to add a rule that allows eslint to run prettier. You do that with the eslint-plugin-prettier plugin.

  "plugins": ["prettier"],          // Defines a rule that allows eslint to run prettier.
  "rules": {
    "prettier/prettier": "error"    // Turns on that rule.
  }

You would also want to turn off eslint rules that may conflct with prettier. You do this with the eslint-config-prettier extension. Note this should come after any other extensions in order to override the rules as appropriate.

"extends": [
    /*other extensions*/, 
    "prettier"                      // Turns off conflicting eslint rules.  
]             

As per their documentation, it sounds the recommended extension that comes with the prettier plugin actually takes care of everything for you, so you should be able to get away with just:

  extends: [
    // .. other extensions
    'plugin:prettier/recommended',
  ]

https://github.com/prettier/eslint-plugin-prettier

Also, in case third-party plugins come with their own rules that may conflict with prettier, you used to have to add "prettier/that-plugin" - "prettier/react" in your case for instance - to the list of plugins in order to tell eslint to defer to prettier for these non-standard rules as relevant as well. But this no longer seems required.