I am using prettier as my formater. When I read a simple JSX function it is written as

function HomePage() {
  return;
  <div>
    <h1>Hello Next.js</h1>
    <p> Welcome to the home page</p>
  </div>;
}

export default HomePage;

however, when saved the autoformatter turns it into

function HomePage() {
    return; <
    div >
        <
        h1 > Hello Next.js < /h1> <
        p > Welcome to the home page < /p> <
        /div>;
}

export default HomePage;

I have turned prettier off and turned most of my other extensions off yet this doesn't change, I belive it is intrinsic to vscode somehow. Anyone have a fix?