how to support different react-router-dom versions with Webpack module federation

Question

We have a host app with old react-router-dom version (react-router-dom:^4.3.1) and we are trying to integrate react micro-app with latest react-router-dom (react-router-dom:^6.7.0)

I tried different ways of defining the router in web-pack config but issue is still existing

**sample:1 **

new ModuleFederationPlugin({
      name: "SampleApp",
      filename: "moduleEntry.js",
      exposes: {
        "./App": "./src/App",
      },
      shared: {
        react: {
          singleton: true,
          requiredVersion: dependencies["react"],
        },
        "react-dom": {
          singleton: true,
          requiredVersion: dependencies["react-dom"],
        },
      },

sample:2

new ModuleFederationPlugin({
      name: "SampleApp",
      filename: "moduleEntry.js",
      exposes: {
        "./App": "./src/App",
      },
      shared: {
        react: {
          singleton: true,
          requiredVersion: dependencies["react"],
        },
        "react-dom": {
          singleton: true,
          requiredVersion: dependencies["react-dom"],
        },
       "react-router-dom": {
          singleton: true,
          requiredVersion: "6.7.0"],
        },
      },

sample:3

new ModuleFederationPlugin({
      name: "SampleApp",
      filename: "moduleEntry.js",
      exposes: {
        "./App": "./src/App",
      },
      shared: {
        react: {
          singleton: true,
          requiredVersion: dependencies["react"],
        },
        "react-dom": {
          singleton: true,
          requiredVersion: dependencies["react-dom"],
        },
       "react-router-dom": {
          requiredVersion: "6.7.0"],
        },
      },