Using jsx-react includes React into the bundle

Question

I'm trying to make React UI component libraries. In my tsconfig, if I set {..., "jsx": "react-jsx"}, I see in the bundle index.esm.js that React code is included.

But if I use the old jsx {"jsx": "react"}, React code is not included in the bundle.

I am using rollup to bundle. This is rollup.config.ts

export default {
  input: "./index.ts",
  output: [
    {
      file: pkg.main,
      format: "cjs",
    },
    {
      file: pkg.module,
      format: "es",
    },
  ],
  external: ["react", "react-dom", "@emotion", "@mui/material", "@mui/style"],
  plugins: [
    resolve(),
    external(),
    commonjs(),
    typescript({
      useTsconfigDeclarationDir: true,
    }),
    terser(),
  ],
};

This is tsconfig

{
    "compilerOptions": {
      "declaration": true,
      "declarationDir": "lib/types",
      "esModuleInterop": true,
      "moduleResolution": "Node",
      "jsx": "react-jsx",
      "resolveJsonModule": true,
      "strict": true,
      "target": "ESNext"
    },
    "include": ["./**/*"],
    "exclude": ["./**/*.stories.tsx", "./lib", "./node_modules"]
  }

How can I use the react-jsx and not include the React code in the bundle. I tried setting sideEffects:false in package.json but it did not work.