Reactでjsxを保存時にformatが効いてしまい、改行が反映されない

●Reactでjsxを保存する時に、formatが効いてしまい１行になってしまう
●Prettierを導入したが効かない

現状の画像↓

実行したい画像↓

【やったこと】
●VSCodeのPrettier拡張機能をインストールし、vsCodeのFormat On Saveにチェックを入れる
参考にしたリンク↓
リンク内容
 リンク内容

●ローカルにPrettierをインストールし.prettierrrcファイルを作成、以下のコードを記載してyarn formatを実行

{
  "printWidth": 120,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false
}

【settings.jsonに追加したもの】

    "editor.formatOnSave": false,
    "prettier.requireConfig": true,
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "javascript.format.enable": true,
    "eslint.autoFixOnSave": true

【package.jsonに追加したもの】

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "format": "prettier --write ./src/**/*.js"
  },

●自分なりに怪しそうな拡張機能があるか調べる
Beautify、htmltagwrap、vscode-styled-componentsなど
アンインストールや無効にしても変化なし

お時間のある方ご教授お願いします。