I have Webpack 5 React project contains an example component under src/component/Simple.jsx:

import React from 'react';

const Simple = () => {
    return (
        <div>
            <h1>Simple</h1>
        </div>
    )
}

export default Simple;

and from src/lib.js I import it and export as default:

import Simple from "./components/Simple";
const lib = {Simple};
export default lib;

On webpack config I use src/lib.js as entry and output like

  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist'),
    library: "mms",
    libraryTarget: "umd",
  },

Moreover, react and react-dom are peerDependencies and has aliases for path.resolve and externals entry.

after running webpack for a build, I run once npm link on the folder root and npm link <package_name> at a fresh project I created with create-react-app tool.

It works fine and I can import the component from the my package.

The issue appear when for my package lib I want use a button that is imported from 3rd party library, for example carbon-components-react (https://github.com/carbon-design-system/carbon-components-react)

I have added on the carbon-components-react to the dependencies of package.json (let's say I want to ship it included), and added the <Button> component to Simple component, and run build.

Now on the consumer cra app I get this error:

Uncaught 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 app 

so if the 3rd party component uses hook.. Is there any way I can overcome it? or it is the issue of more than one copy of React?

Advices are welcome.