Prettier JS VSCode Setup Not Working As Expected

Question

i have installed prettier and it seems to work as expected from the executable when i run: prettier --write .

i am trying to set it up with the vscode addon to "format on save"... but this doesnt seem to format it correctly. and i can figure out what could be causing this.

given the following code (which is unchanged when i run prettier --write .):

import React from "react";

const TestComponent = ({ someVal = "hello world" }) => (
  <div>
    <span>{someVal}</span>
  </div>
);

if i enable "format on save" and save the file, it changes the code to look like:

import React from "react";

const TestComponent = ({
  someVal = "hello world"
}) => ( <
  div >
  <
  span > {
    someVal
  } < /span> <
  /div>
);

my .prettierrc.json is empty as described in: https://prettier.io/docs/en/install.html:

{}

has anyone else experienced this or know how to fix this?