prettierでjsxファイルがフォーマットできない

Question

前提・実現したいこと

prettierでjsxファイルをformatしたい。

発生している問題・エラーメッセージ

nextjsのjsxファイルがformatできない。

該当のソースコード

settings.json

{
"editor.defaultFormatter": "esbenp.prettier-vscode"
}

試したこと

jsファイルだとformatできます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

ubuntu 20.04 lts
vscode version 1.57.0
nextjs

"dependencies": {
"next": "10.2.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-hook-form": "^7.8.4"
}