Consuming a published package in React results in a runtime error but runs in local

Question

I have created an npm package in React with a few components and built it using Webpack. While running it locally, it works successfully. However, when I try to consume it in another React app, I encounter a runtime error

runtime error

But it working as expected in local(npm start)

Local

I have tried the following things: First, I attempted to use two different main file entry points in package.json - src/index.ts and build/dist/index.js. However, the first entry point did not work due to issues with Webpack bundling, and I could only see the build/dist/index.js file. Additionally, I checked the Webpack configuration

Here is the code:

Home.tsx

import { Navigationbar } from './Navigationbar';
import { RoutesView } from './Routes';

/**
 * Responsible for rendering the home page
 */
export const Home: React.FC = () => {

  return (
    <div className="ckb-container">
      <Navigationbar />
      <RoutesView />
    </div>
  )
};

index.ts

import { MarkdownContainer } from "./Components/MarkdownContainer";
import { Home } from "./Components/Home";

export { MarkdownContainer, Home };

package.json (v1)

{
  "name": "sample",
  "version": "1.0.0",
  "main": "./src/index.ts",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/"
  },
  "files": [
    "build/dist"
  ],
}

package.json (v2)

{
      "name": "sample",
      "version": "1.0.0",
      "main": "./build/dist/index.js",
      "publishConfig": {
        "registry": "https://npm.pkg.github.com/"
      },
      "files": [
        "build/dist"
      ],
    }

Webpack-config

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: {
        index: path.join(path.join(path.resolve(process.cwd()), "/src/index.ts")),
    },
    output: {
        filename: "[name].js",
        path: path.join(path.resolve(process.cwd()), "build/dist"),
        library: "sample",
        libraryTarget: 'umd',
        (tried by adding public path as well)
    },
    devServer: {
        historyApiFallback: true
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js'],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: './index.html',
            favicon: './public/icon.png'
        }),
    ],
    module: {
        rules: [{
                test: /\.(css|sass|scss)$/,
                use: [{
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ],
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.(png|svg|ico|jpg|jpeg|gif|bmp|md)$/,
                use: "file-loader"
            },
        ],
    }
}

consuming app:

import { Home } from "sample";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Home />
      </header>
    </div>
  );
}

export default App;