Current Behavior

With my tsconfig.json's compilerOptions.jsx set to "react", when using .jsx files that contain any jsx markup, on tsdx build I get

(babel plugin) SyntaxError: /path/src/File.jsx: Unexpected token (3:11)
  1 | import React from 'react';
  2 | export function SomeComponent() {
> 3 |     return <div>Foo</div>;
    |            ^
  4 | }

Now, I'd expect this to work out of the box with .jsx files but I also tried to instead set the tsconfig.json's compilerOptions.jsx: "preserve" and use @babel/preset-react via my .babelrc

{
  "plugins": [
    ...
  ],
  "presets": ["@babel/preset-react"]
}

Still getting the same error. While the plugins I use seem to work, preset-react seems to not do the job for some reason.

Expected behavior

.jsx files' jsx code should be transpiled according to the tsconfig's jsx option or there should be another way to achieve this.

Additional context

Using the .tsx file extension instead of .jsx for the same file, everything works as expected while using jsx: "react" but still can't get it to work with jsx: "preserve" plus Babel.

Your environment