How to prevent Prettier errors in React app?

Question

Below are the errors I keep getting in my app:

I found this StackOverflow article that should have solved the issue, but after adding to the rules section in .eslintrc, I am still getting these errors. I am sure it is something wrong with my .eslintrc file. Here it is below:

module.exports = {
  parser: "babel-eslint",
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ["react", "prettier"],
  rules: {
    "prettier/prettier": ["error", {
      "endOfLine":"auto"
    }],
    "no-unused-vars": "warn",
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "prettier"
  ],
};

Not sure what I am doing wrong. The StackOverflow solution mentioned above also mentioned to try setting the "endOfLine":"auto" in your .prettierrc file, however it does not appear I have that file in my project. Thanks for the help