ReactJS - when creating one react application as package and installing in another react application, handlers not workings

Question

I am trying to add one react project inside another react project.

I have created a react application Project-A which I have build and packed using webpack and npm pack command and then I am installing this package from the path in another Project-B using npm install ../path/Project-A

Suppose Project-A is having a Button component like this

import React, { useState } from 'react';

const Button = () => {
  const [buttonText, setButtonText] = useState('click here!');

  const handleClick = () => {
    const text = buttonText === 'click here' ? 'clicked' : 'click here';
    setButtonText(text);
  };

  return <button type="button" onClick={() => handleClick()}>{buttonText}</button>;
};

export default Button;

which I have imported in Project-B now the button looks fine in UI but the click and all are not working also tried putting debugger in Button component but it looks like click handler is not even getting triggered.

I am not getting any error in console

In Project-A I have added react and react-dom as peerDependencies in package.json and also added in externals section of webpack.config.js

Is there anything I am missing here?