Prettier not working. Already set to default formatter

Question

Getting this error: Extension 'Prettier - Code formatter' is configured as formatter but it cannot format 'TypeScript React'-files

I've tried in all types of files including typescriptreact, javascriptreact, javascript, etc.

To be more specific, I am using ESLint with Prettier for a NextJS13 app. Below are my settings.json

  "files.autoSave": "afterDelay",
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  },
  "[erb]": {
    "editor.defaultFormatter": "aliariff.vscode-erb-beautify"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "git.autofetch": true,
  "editor.fontSize": 16,
  "eslint.format.enable": true,
  "python.formatting.provider": "black",
  "[python]": {
    "editor.defaultFormatter": "ms-python.python"
  },
  "editor.fontFamily": "JetBrains Mono",
  "editor.accessibilitySupport": "off",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "workbench.iconTheme": "vscode-icons",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "terminal.integrated.env.osx": {
    "FIG_NEW_SESSION": "1"
  },
  "snyk.yesWelcomeNotification": false,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[ruby]": {
    "editor.defaultFormatter": "rebornix.ruby"
  },
  "bracket-pair-colorizer-2.depreciation-notice": false,
  "eslint.workingDirectories": [
    "./react-client"
  ],