Micro frontend using module federation - not able to use shared bootstrap css module

Question

I am using module-federation and trying to create a Micro Fronetend demo in which I have a Gatsby project ( let's say it as Client ) which is exposing these 2 components:

1. A HelloWorld component with HelloWorld.module.css & HelloWorld.css.
2. A Header component which is a Bootstrap 5.3.2 header example.

here is the config for Client:

module.exports = {
  plugins: [
    // 'gatsby-plugin-sass',
    {
      resolve: 'gatsby-plugin-federation',
      options: {
        ssr: process.env.MF_SSR !== 'false',
        federationConfig: {
          name: 'remote',
          exposes: {
            // Exported components
            './HelloWorld': './src/components/HelloWorld',
            './Header': './src/components/Header',
          },
          shared: {
            bootstrap: { singleton: true, eager: true, import: "bootstrap/dist/css/bootstrap.min.css" }
          },
        },
      },
    },
  ],
}

It is exporting the components which are under exposes object and I am able to import them in another Gatsby & in a ReactJS project and it is also exposing Bootstrap as shared dependency. Here is a snippet of remoteEntry.js file:

switch(name) {
/******/                case "default": {
/******/                    register("@gatsbyjs/reach-router", "2.0.1", function() { return Promise.all([__webpack_require__.e("framework"), __webpack_require__.e("node_modules_gatsby_dist_internal-plugins_bundle-optimisations_polyfills_object-assign_js-nod-07400b")]).then(function() { return function() { return __webpack_require__(/*! ./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs */ "./node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs"); }; }); });
/******/                    register("bootstrap", "5.3.2", function() { return Promise.all([__webpack_require__.e("styles-node_modules_bootstrap_dist_css_bootstrap_min_css"), __webpack_require__.e("node_modules_bootstrap_dist_css_bootstrap_min_css")]).then(function() { return function() { return __webpack_require__(/*! ./node_modules/bootstrap/dist/css/bootstrap.min.css */ "./node_modules/bootstrap/dist/css/bootstrap.min.css"); }; }); });
/******/                    register("react-dom", "18.2.0", function() { return Promise.all([__webpack_require__.e("framework"), __webpack_require__.e("webpack_sharing_consume_default_react_react")]).then(function() { return function() { return __webpack_require__(/*! ./node_modules/react-dom/index.js */ "./node_modules/react-dom/index.js"); }; }); });

In this file I can see Bootstrap 5.3.2 is exposed but somehow I am not able to import and apply it on my imported Header component, neither in Gatsby nor in ReactJS project.

Please help me to use this shared exported dependency preferably in ReactJS project.

Thanks in advance.

P.S.: If you want to see some code snippet which I haven't added here then please let me know, I will add it.