Encountering issue in reusable components with react-multi-carousel

I’m developing a reusable component using react-multi-carousel for a React app. However, when I try to integrate it into a different React application, I encounter an error. Could there be issues with dependencies, version compatibility, or incorrect configuration causing this problem?

This is my re-usable component

import React from 'react';
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';

const Widget1 = () => {
  const items = [
    <div style={{ background: 'red', height: 200 }}>Item 1</div>,
    <div style={{ background: 'blue', height: 200 }}>Item 2</div>,
    <div style={{ background: 'green', height: 200 }}>Item 3</div>,
  ];

  const responsive = {
    superLargeDesktop: { breakpoint: { max: 4000, min: 1024 }, items: 5 },
    desktop: { breakpoint: { max: 1024, min: 768 }, items: 3 },
    tablet: { breakpoint: { max: 768, min: 464 }, items: 2 },
    mobile: { breakpoint: { max: 464, min: 0 }, items: 1 },
  };

  return (
    <Carousel responsive={responsive}>
      <div style={{ background: 'red', height: 200 }}>Item 1</div>
      <div style={{ background: 'blue', height: 200 }}>Item 2</div>
      <div style={{ background: 'green', height: 200 }}>Item 3</div>
    </Carousel>
  );
};

export default Widget1;




// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/Widget1.js',  // Entry point: main JS file of the component
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'Widget1.js',  // Output the bundled JS file in the dist/ folder
    library: 'Widget1',      // Expose it as a global library
    libraryTarget: 'umd',        // Universal module definition (works for CommonJS, AMD, and as a global)
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,           // Match all JS/JSX files
        exclude: /node_modules/,   // Exclude node_modules
        use: {
          loader: 'babel-loader',  // Use Babel to transpile JavaScript
          options: {
            presets: [
                [
                    '@babel/preset-react',
                    {
                      runtime: 'automatic', // Enable the automatic runtime
                      importSource: '@emotion/react', // Optional: use Emotion for JSX pragmas
                    },
                ], 
                '@babel/preset-env'
            ],
          },
        },
      },
      {
        test: /.css$/,            // Match CSS files
        use: ['style-loader', 'css-loader'],  // Use these loaders to handle CSS
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],  // Allow importing without specifying extensions
  },
  externals: {
    react: 'react',
    'react-dom': 'react-dom'
  },
  devtool: 'source-map',
  mode: 'production',             // Set mode to production for minification and optimization
};

this is my react app where I am consuming the widget1

<Widget1 />

The following error messages I am getting,

Cannot read properties of undefined (reading 'validated')
TypeError: Cannot read properties of undefined (reading 'validated')
    at cloneAndReplaceKey (http://localhost:3000/static/js/bundle.js:21406:49)
    at mapIntoArray (http://localhost:3000/static/js/bundle.js:21499:200)
    at mapIntoArray (http://localhost:3000/static/js/bundle.js:21504:164)
    at mapChildren (http://localhost:3000/static/js/bundle.js:21515:5)
    at Object.toArray (http://localhost:3000/static/js/bundle.js:21731:14)
    at t.default (http://localhost:3000/static/js/bundle.js:23108:218)
    at react-stack-bottom-frame (http://localhost:3000/static/js/bundle.js:17901:18)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:9218:20)
    at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:10487:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:11105:16)