RollupError: "default" is not exported by "node_modules/react/index.js"

Using Rollup for the first time for creating a library, have a basic button component and running into this error when running rollup - c

src/index.ts → dist/esm/index.js... [!] RollupError: "default" is not exported by "node_modules/react/index.js", imported by "src/components/Button/Button.tsx". https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module src/components/Button/Button.tsx (1:7) 1: import React from "react"; ^ 2: const Button = (props) => {

Followed the instructions from the troubleshooting link, installed @rollup/plugin-commonjs but still get this error.

package.json

{
  "name": "button-library",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "rollup": "rollup -c"
  },
  "author": "Leon Gaban",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^25.0.4",
    "@rollup/plugin-node-resolve": "^15.2.1",
    "@rollup/plugin-typescript": "^11.1.3",
    "@types/react": "^18.2.22",
    "jest-environment-jsdom": "^29.7.0",
    "rollup": "^3.29.2",
    "rollup-plugin-dts": "^6.0.2",
    "rollup-plugin-postcss": "^4.0.2",
    "tslib": "^2.6.2",
    "typescript": "^5.2.2"
  },
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "files": [
    "dist"
  ],
  "types": "dist/index/.d.ts"
}

Rollup config

import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import commonjs from "@rollup/plugin-commonjs";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";

import packageJson from "./package.json" assert { type: "json" };

export default [
  {
    input: "src/index.ts",
    output: [
      {
        dir: "output",
        format: "cjs",
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      typescript({ tsconfig: "./tsconfig.json" }),
      postcss(),
    ],
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [
      {
        file: "build/scripts.js",
        format: "esm",
        sourcemap: true,
        globals: ["react"],
      },
      {
        file: "dist/index.d.ts",
        format: "esm",
      },
    ],
    plugins: [
      commonjs({
        include: "./node_modules/**",
      }),
      dts(),
    ],
    external: [/\.(css|less|scss)$/],
  },
];

The Button component

import React from "react";

interface ButtonProps {
  label: string;
}

const Button = (props: ButtonProps) => {
  return <button>{props.label}</button>;
};

export default Button;