'Angular Material where the opened panels of a mat-select wouldn't close with module federation web pack 5

I am facing issue with Angular Material where the opened panels of a mat-select wouldn't close in host app. Host and remote app both are using Angular 12 and angular material is shared in webpack config file.

Mat-select drop down is working in remote app but same drop down not working in host app.

Please suggest.

My web pack file content:

    shared: share({
      "@angular/core": {
        singleton: true,
        strictVersion: true,
        requiredVersion: "auto",
      },
      "@angular/common": {
        singleton: true,
        strictVersion: true,
        requiredVersion: "auto",
      },
      "@angular/common/http": {
        singleton: true,
        strictVersion: true,
        requiredVersion: "auto",
      },
      "@angular/router": {
        singleton: true,
        strictVersion: true,
        requiredVersion: "auto",
      },
      "@angular/material": {
        singleton: true,
        strictVersion: true,
        requiredVersion: "auto",
      }


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source