Unexpected token on JSX despite using babel preset for react

I created a branch on a simple example repo to show this issue. Note that it is branch babel in that repo to reproduce the issue below.

I have a lerna monorepo.

It has a packages directory, and one of the packages there is called component-library, containing a simple React component.

That package has a rollup.config.js:

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
const extensions = ['.ts', '.js', '.tsx'];

export default {
  input: 'src/index.tsx',
  output: {
    dir: './build',
    format: 'cjs',
  },
  plugins: [resolve({ extensions }), babel({ include: '**/packages/**/*', extensions })],
};

When I try to bundle that package, I get an error:

src/index.tsx → ./build...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/MyComponent.tsx (4:33)
2: import { add } from '@project/utils';
3: 
4: export const MyComponent = () => <div>{add(2, 2)}</div>;
                                    ^
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

My .babelrc looks like this:

{
  "presets": ["@babel/preset-env","@babel/preset-react", "@babel/preset-typescript"]
}

Why do I have this error? Doesn't babel with @babel/preset-react handle JSX?

rollup / rollup-plugin-babel

Unexpected token on JSX despite using babel preset for react #358