Странное автоформатирование jsx-фрагмета (create-react-app) в vsc

Всем привет! Проблема такая: мой код (до форматирования):

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          main page test
        </p>
        <p>ritsonphoto</p>
      </header>
    </div>
  );
}

мой код(после форматирования):

function App() {
    return ( <
        div className = "App" >
        <
        header className = "App-header" >
        <
        p >
        main page test <
        /p> <
        p > ritsonphoto < /p> <
        /header> <
        /div>
    );
}