Rollup "Unexpected token" error when using JSX with Babel and React preset

Question

I'm trying to bundle a React app using Rollup and Babel. I have configured Rollup with the @rollup/plugin-node-resolve, @rollup/plugin-commonjs, and @rollup/plugin-babel plugins. However, when I try to bundle the app, I get the following error:

[!] RollupError: Unexpected token
index.js (7:2)
5: 
6: const App = () => (
7:   <h1>Hello JSX</h1>
     ^
8: );

I've checked my Babel configuration and I'm using the @babel/preset-react preset, so I'm not sure why Rollup is throwing an error.

Here's my Rollup configuration:

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyApp',
    plugins: [terser()]
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      babelHelpers: 'runtime',
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: ['@babel/plugin-transform-runtime']
    })
  ]
};

Any ideas on how to fix this error? I'll be glad to provide any additional information if necessary.

I am trying to bundle a React application using Rollup, but I am getting an error "Unexpected token" when I use JSX syntax. I have already added the @rollup/plugin-babel plugin and configured it to use @babel/preset-react, but the error persists.

I was expecting Rollup to successfully bundle my React application, but instead, I am seeing this error. I have tried reinstalling Rollup and its plugins, and also restarting the Rollup bundling process, but the error remains.