Error while creating reactjs web component library using @mui

Question

I want to create a reactjs library with my personalized components from @mui

It works fine without such components but when I add anything from it I have the following error:

index.js:647 Warning: 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 https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this 
Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at Object.useContext (index.js:2011:1)
    at useTheme$3 (index.js:11650:1)
    at ThemeProvider$1 (index.js:11690:1)
    at renderWithHooks (react-dom.development.js:16316:1)
    at mountIndeterminateComponent (react-dom.development.js:19986:1)
    at beginWork (react-dom.development.js:21454:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4112:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4161:1)
    at invokeGuardedCallback (react-dom.development.js:4223:1)
    at beginWork$1 (react-dom.development.js:27241:1)

It seems I have the case number 3, 'multiple copies of React in the same app' but I have no idea how to fix it, there's a way to use libraries like @mui inside my react components?

here is my rollup configuration:

import peerDepsExternal from "rollup-plugin-peer-deps-external"
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import postcss from "rollup-plugin-postcss";
import image from "@rollup/plugin-image";
import dts from "rollup-plugin-dts";

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,
            },
        ],
        plugins: [
            peerDepsExternal(),
            resolve(),
            commonjs(),
            typescript({tsconfig: "./tsconfig.json"}),
            image(),
            postcss(),
        ],
    },
    {
        input: "dist/esm/types/index.d.ts",
        output: [{file: "dist/index.d.ts", format: "esm"}],
        plugins: [dts()],
        external: [/\.css$/],
    },
];

Answer 1

Found it! I will leave it here for reference...

All dependencies that you may have in both projects ( library and consumer) needs to be added as peedDependecies in your library package.json.

"dependencies": {
// moved from here
 }
"peerDependencies": {
// to here
    "react": "^18.2.0",
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.0.0"
  },

in your consumer app package.json be sure to add the same dependencies and versions.