I'm testing MUI components, and I wanted to give their example app with vite / TS a spin with their Dashboard template. The README in the Dashboard says to spin up one of the example apps, copy the Dashboard directory into it and you're ready to go.

I cloned the MUI repo from https://github.com/mui/material-ui/ copied the examples/material-ui-vite-ts directory to a new directory on my dev machine, ran npm i then npm run dev. So far so good.

I then copied the dashboard and shared-theme directories into my new project, re-ran npm run dev and I'm getting errors:

X [ERROR] The JSX syntax extension is not currently enabled    

src/dashboard/Dashboard.js:28:4:
  28 │     
     ╵     ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

I'm seeing in the Dashboard/components/ directory that each .tsx component has a .js counterpart, which I don't understand.

The issue doesn't seem to be documented in the README and I'm not sure how to proceed so that the build will use the tsx file rather than the js.