export material ui themed package

I want to create a new npm package where i can export all @material-ui/core components but themed my way. Currently using typescript and rollup, but failing. This is my code

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(),
  ]
};

and 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"
  ]
}

and the error it gets when importing Button into a new app is

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.

Help please!

UPDATE

I made another test, this time creating and exporting a new component made by me, and still gets the same invalid hook call error, heres the code!

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;

so maybe is my bundler or compiler problem?