Prettier not working. Already set to default formatter - visual-studio-code

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"
],