How to Integrate a React Component from One React App into Another React App Using CDN

I’m trying to display a component from one React application within another React app using a CDN. Although the component works perfectly in its original application, I encountered an error related to the Use State hook when importing it via the CDN. This error is preventing the component from functioning correctly. How can I resolve this issue?

What I Tried and What I Expected:

I am rendering components from App 1 into App 2 by building App 1 and serving it through localhost on port 8000.

Desired Behavior:
The component should integrate seamlessly and function correctly within the host React app without any issues related to Use State.

Problem:
When importing the component via CDN, I encounter an error related to the use state, which does not occur when the component is used within its original application. How can I resolve this issue?

Screenshots and Configurations:

  1. App 1/Button.jsx App 1/Button.jsx
  2. App 2/index.html App 2/index.html
  3. App 2/App.js App 2/App.js
  4. App 1/Webpack.config.js App 1/Webpack.config.js

Error Faced:

Error Facing when rendering Error Facing when rendering