Structure of my react based application is micro-frontend using webpack ModuleFederationPlugin.
Currently, I am only exposing component from child and using it as remote in parent application.

Now, I want to expose a Higher order component from parent to child, which can be used in child app and expose back to parent.

Trouble is if I add remote in my child app, it is still not accessible.

Is this structure even possible ?

Note: I am not asking to share data from parent to child but exposing component itself.

Added remote in my child app

remotes : {
          container: `promise new Promise(resolve => {
            const script = document.createElement('script')
            let domain = window.location.origin.includes('localhost') ? 'http://localhost:5000/' : window.location.origin;
            script.src = domain+''+'remoteEntry.js';
            script.onload = () => {
              // the injected script has loaded and is available on window
              // we can now resolve this Promise
              const proxy = {
                get: (request) => window.container.get(request),
                init: (arg) => {
                  try {
                    return window.container.init(arg)
                  } catch(err) {
                    console.log('remote container already initialized')
                  }
                }
              }
              resolve(proxy)
            }
            // inject this script with the src set to the versioned remoteEntry.js
            document.head.appendChild(script);
          })
          `
        }

In parent(shell app) added

 exposes: {
            './AnyWrapperComponent' : './src/components/custom/somepath/AnyWrapperComponent'
          }