Problem using a NPM Package builded with Rollup

Question

I am creating a npm package with react components, providers, and other utilities. The idea is use this npm package in other projects. I configured rollup to create the builds but when I try to use it in another project I got a "React is not defined" error.

Here is my code and the error in detail:

package.json:

{
  "name": "myapp",
  "version": "0.1.14",
  "description": "Npm package.",
  "main": "lib/index.cjs.js",
  "module": "lib/index.esm.js",
  "files": [
    "dist",
    "README.md"
  ],
  "scripts": {
    "start": "react-scripts start",
    "build": "npx rollup -c",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@fluentui/react": "8.52.2",
    "@rjsf/core": "4.2.0",
    "@rjsf/fluent-ui": "4.2.0",
    "@types/node": "^17.0.21",
    "@types/react": "^17.0.40",
    "@types/react-dom": "^17.0.13",
    "axios": "^0.25.0",
    "office-ui-fabric-core": "^11.0.0",
    "react-query": "^3.34.19",
    "react-simple-resizer": "^2.1.0"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0",
    "@fluentui/react": "8.52.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.17.0",
    "@babel/core": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@fluentui/example-data": "^8.4.0",
    "@rollup/plugin-babel": "^5.3.0",
    "@rollup/plugin-commonjs": "^21.0.1",
    "@rollup/plugin-node-resolve": "^13.1.3",
    "@rollup/plugin-replace": "^4.0.0",
    "@rollup/plugin-typescript": "^8.3.1",
    "react-scripts": "^5.0.0",
    "rollup": "^2.67.1",
    "rollup-plugin-import-css": "^3.0.3",
    "rollup-plugin-includepaths": "^0.2.4",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-terser": "^7.0.2",
    "typescript": "^4.6.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

rollup.config.js:

import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import includePaths from "rollup-plugin-includepaths";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import { terser } from "rollup-plugin-terser";
import pkg from "./package.json";
import typescript from "@rollup/plugin-typescript";
import css from "rollup-plugin-import-css";
import replace from "@rollup/plugin-replace";

const outputs = [
  {
    file: pkg.main,
    format: "umd",
  },
  {
    file: pkg.module,
    format: "es",
  }
]

const external = [
  ...Object.keys(pkg.peerDependencies || {})
].map(name => RegExp(`^${name}($|/)`))

const config = outputs.map(({ file, format }) => ({
  input: "src/lib/index.js",
  output: {
    file,
    format,
    name: "ReactPackage",
    globals: {
      react: "React",
      "react-dom": "ReactDOM",
      "@fluentui/react": "FluentUI",
    }
  },
  external,
  plugins: [
    typescript(),
    peerDepsExternal(),
    includePaths({
      include: {},
      paths: ["src/lib"],
      external: Object.keys(pkg.dependencies),
      extensions: ['.js', '.json', '.html', '.tsx', '.ts']
    }),
    css(),
    babel({
      babelHelpers: "bundled",
      exclude: "node_modules/**",
      configFile: "./babel.config.rollup.js",
    }),
    resolve({
      browser: true
    }),
    commonjs(),
    terser(),
    replace({
      preventAssignment: true,
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ],
}));

export default config;

Babel:

const pkg = require('./package.json');

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
        targets: pkg.browserslist.production,
      },
    ],
    [
      '@babel/preset-react',
      {
        "runtime": "automatic"
      }
    ]
  ],
  ignore: ['node_modules/**'],
};

The provider that I am trying to use but I get an "React is not defined" error:

Provider.ts:

import PContext from "../contexts/pContext";
import { QueryClient, QueryClientProvider } from "react-query";
import React, { useState } from "react";

const queryClient = new QueryClient();

const PProvider = ({ children, url }) => {
  const [active, setActive] = useState(null);

  return (
    <PContext.Provider
      value={{
        url,
        active,
        setActive
      }}
    >
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </PContext.Provider>
  );
};

export default PProvider;