我想创建一个新的 npm 包，以便我可以导出所有 @material-ui/core 组件，但主题是我自己喜欢的。目前使用 typescript 和 rollup，但失败了。这是我的代码

index.ts

export { Button } from '@material-ui/core'; 

package.json

{
  "name": "@ripley-ui/core",
  "version": "1.0.0",
  "description": "",
  "main": "build/index.js",
  "module": "build/index.esm.js",
  "types": "build/index.d.ts",
  "files": [
    "build"
  ],
  "scripts": {
    "build": "rollup -c",
    "storybook": "start-storybook -p 6006",
    "storybook:export": "build-storybook",
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "author": "",
  "license": "ISC",
  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@rollup/plugin-commonjs": "^13.0.0",
    "@rollup/plugin-node-resolve": "^8.1.0",
    "@storybook/react": "^5.3.19",
    "@testing-library/jest-dom": "^5.11.0",
    "@testing-library/react": "^10.4.5",
    "@types/jest": "^26.0.4",
    "@types/react": "^16.9.43",
    "babel-loader": "^8.1.0",
    "babel-preset-react-app": "^9.1.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "rollup": "^2.21.0",
    "rollup-plugin-peer-deps-external": "^2.2.3",
    "rollup-plugin-typescript2": "^0.27.1",
    "ts-jest": "^26.1.1",
    "typescript": "^3.9.6"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.0"
  }
}

rollup.config.js

import external from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";

const packageJson = require("./package.json");

export default {
  input: "src/index.ts",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    }
  ],
  external: ["react", "@material-ui/core"],
  plugins: [
    external(),
    resolve(),
    typescript({
      rollupCommonJSResolveHack: true,
      clean: true
    }),
    commonjs(),
  ]
};

和 tsconfing.json

{
  "compilerOptions": {
    "rootDir": "src",
    "declaration": true,
    "declarationDir": "build",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "sourceMap": true,
    "jsx": "react",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "build",
    "storybook-static",
    "src/**/*.stories.tsx",
    "src/**/*.test.tsx"
  ]
}

将按钮导入新应用程序时出现的错误是

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

请帮忙！

更新

我进行了另一次测试，这次创建并导出我制作的新组件，仍然出现相同的无效钩子调用错误，这是代码！

import React, { useState } from "react";

import { TestComponentProps } from "./TestComponent.types";


const TestComponent: React.FC<TestComponentProps> = ({ theme }) => {
  const [state, setState] = useState('prueba')
  return (
  <div
    data-testid="test-component"
    className={`test-component test-component-${theme}`}
  >
    <h2>{state}</h2>
  </div>
)};

export default TestComponent;

所以也许是我的捆绑器或编译器的问题？