I have project with microfrontend using react and webpack. In the container app also I am using antd library. Then I created the microfrontend app and used as remoteEntry in container app. I was able to load the components successfully from the remote microfrontend to the container app.But when I try to install antd libry seperatly in the remote microfrontend and use it was giving me the following error.

    ERROR
null is not an object (evaluating 'dispatcher.useContext')
useContext@
Badge@
renderWithHooks@
updateForwardRef@
beginWork$1@
performUnitOfWork@
workLoopSync@
renderRootSync@
recoverFromConcurrentError@
performConcurrentWorkOnRoot@
workLoop@
flushWork@
performWorkUntilDeadline@

This is my remote microfrontend compoenent webpack config file.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, '../src', 'index.js'),
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new ModuleFederationPlugin({
          name:'ecom',
          filename:'remoteEntry.js',
          exposes:{
            './com1':'./src/pages/Com1',
            './com2':'./src/pages/Com2'
          }
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public', 'index.html'),
        }),
    ],
    module: {
        rules: [
            {
                test: /.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                    },
                },
            },
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    devServer: {
        static: {
            directory: path.join(__dirname, '../public'),
        },
        port: 3001,
    },
};

This is my container webpack config js file.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, '../src', 'index.js'),
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new ModuleFederationPlugin({
            name:'container',
            remotes:{
                chart: 'ecom@http://localhost:3001/remoteEntry.js'
            }
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public', 'index.html'),
        }),
    ],
    module: {
        rules: [
            {
                test: /.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                    },
                },
            },
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /.(png|jpe?g|gif)$/i,
                use: [
                  {
                    loader: 'file-loader',
                  },
                ],
              },
        ],
    },
    devServer: {
        static: {
            directory: path.join(__dirname, '../public'),
        },
        port: 3000,
    },
};

This is how I used the compoenent from remote in the container app.

import React, { Suspense } from "react";
import { Responsive, WidthProvider } from "react-grid-layout";
import { Image, Empty } from 'antd'
import picon from '../../assets/images/performance-icon-png-19.png'
import chartStyle from "./ChartsStyle";
import { connect } from 'react-redux'
import { emptyCompanyMsg } from "../../constants";
const Com1 = React.lazy(() => import('ecom/Com1'))
const Com2 = React.lazy(() => import('ecom/Com2'))

const ResponsiveGridLayout = WidthProvider(Responsive);

const Ecom = (props) => {
  const { company } = props
  const layout = {
    lg: [
      { x: 0, y: 0, w: 1, h: 2 },
      { x: 6, y: 1, w: 1, h: 2 }
    ],
    md: [
      { x: 0, y: 0, w: 1, h: 2 },
      { x: 0, y: 1, w: 1, h: 2 }
    ],
    sm: [
      { x: 0, y: 0, w: 1, h: 2 },
      { x: 0, y: 1, w: 1, h: 2 }
    ],
    xs: [
      { x: 0, y: 0, w: 1, h: 2 },
      { x: 0, y: 1, w: 1, h: 2 }
    ],
    xxs: [
      { x: 0, y: 0, w: 1, h: 2 },
      { x: 0, y: 1, w: 1, h: 2 }
    ],
  }

  return (
    <div style={chartStyle.chartsOuter}>
      <div style={chartStyle.chartTitle}>
        <Image src={picon} width={30} height={30} />
        Performance
      </div>
      <Suspense fallback={"loading"}>
        {company ? <ResponsiveGridLayout
          className="chart-layout"
          layouts={layout}
          cols={{ lg: 2, md: 1, sm: 1, xs: 1, xxs: 1 }}
          width={1200}
          breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
          rowHeight={500}
          preventCollision={false}
        >
          <div key="1" >
            <Com1 />
          </div>
          <div key="2">
            <Com2 />
          </div>
        </ResponsiveGridLayout> : <Empty description={emptyCompanyMsg} />}
      </Suspense>
    </div>
  );
}

const mapStateToProps = state => {
  return {
    company: state.company.company
  }
}


export default connect(mapStateToProps, {})(Ecom);

This is my remote compoenet look likes.

import React from "react";
import ChartCard from "../../components/ChartCard/ChartCard.component";

    const Com1 = () => {
        return (
            <>
                <ChartCard />
            </>
        )
    }
    
    export default Com1


    import React from "react";
    import { Badge } from 'antd';
    
    const ChartCard = (props) => {
        return (
            // <Card title="test" >
            //     testing
            // </Card>
            <Badge />
        )
    }
    
    export default ChartCard;

Can someone help to resolve this issue. I search and tried the solutions provided inthe internet still unable to use andt liabry in the remote microfrontend.