タグの中に空白が出ないようにprettierを設定したい（React）

Question

prettierの設定方法が分からず、コードを整形したタイミングでタグの中に意図せず空白が追加されます。
MS Codeを使用していますが、画像のようなエラーが出てしまい、この空白を無くせばエラーがなくなると考えています（間違っていればすみません）。

エラーと言っても、ブラウザ上では実際には動作するので問題は無いのですが、見た目で気になってしまいます。

表示したい内容↓

import ReactDOM from 'react-dom';
const App = () => {
    return <h1> こんにちは！ </h1>;
};
ReactDOM.render(<App /> , document.getElementById('root'));

整形された場合↓

import ReactDOM from 'react-dom';
const App = () => {
    return <h1 > こんにちは！ < /h1>;
};
ReactDOM.render( < App / > , document.getElementById('root'));

{
    "printWidth": 100,
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "endOfLine": "lf"
}

{
  "root": true,
  "env": {
    "browser": true,
    "es5": true
  },
  "extends": ["eslint:recommended", "prettier"],
  "parserOptions": {
    "sourceType": "module"
  }
}