Host App cannot load Remote page because is not served inside its state provider - Webpack Module Federation

I am trying to access routes from the remote app to the host app, using webpack module federation. I have a Host App that uses mobx as store provider and Remote App that uses recoil as store provider.

The remote App exposes the bootstrap file and its routes in the following way.:

    new ModuleFederationPlugin({
      name: 'items_list',
      filename: 'items-list-plugin-app-entry.js',
      exposes: {
        './ItemsListApp': './src/bootstrap',
        './routes': './src/routes',
      },

The routes page contains the following:

import { lazy } from 'react';

const ItemDetails = lazy(() => import('./app/components/ItemDetails'));

const itemsListRoutes = [
  {
    path: '/item-list/:id',
    component: ItemDetails,
    exact: false,
  },
];

export { itemsListRoutes };

The host app loads the ItemsListApp fine, but when trying to load a component from the routes, in this case ItemDetails, then it throws an error stating: This component must be used inside a RecoilRoot component.

The ItemDetails page is used inside the RecoilRoot in the remote app, but in the host app is not. So what is the best approach to solve this issue ?