¿Cómo configuro prettier para formatear archivos tsx que usan styled component?

Aquí está lo que se espera después de formatear mi archivo:
typescript
export const StyledDiv = styled.divwidth: 56px;
height: 30px;;

Y esto es lo que obtengo después de formatear:
typescript
export const StyledDiv =
styled.div <
StyledDivProps >
width: 56px;
height: 30px;
`;

Investigué para encontrar la configuración adecuada en Prettier, pero no encontré ninguna solución que funcionara. Creo que me falta algo en mi archivo de configuración en VSCode. ¿Alguien tiene idea de cuál es el origen del problema? ¿Tiene una solución?

¡Gracias!

Aquí está mi archivo settings.json:

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "workbench.startupEditor": "welcomePage",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "update.enableWindowsBackgroundUpdates": false,
  "update.mode": "manual",
  "[json]": {
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace",
  },
  "editor.formatOnSave": false
}