Multiple HierarchicalMenu with same facets param in the one page but different window size

Question

We have two Filter components that use connectHierarchicalMenu() on one page. We would like to render one of them on bigger devices like desktops and one for tablets & mobile devices.

Expected behavior: Users must able to open the page in desktop size and see <BigFilter /> component and when they resize the window to a smaller size like a tablet/mobile, we want to render <SmallFilter /> component.

We tried checking the userAgent & window.innerWidth to prevent rendering both at the same time, but it seems they invoke together.

Imaginary sample code from our page:

const Example = () => {

  const THRESHOLD  = 1000;
  const isBrowser =  typeof window !== 'undefined';
  const isDesktop = isBrowser && (window.innerWidth ?? 0) > THRESHOLD;

  return (
    <div>
      {isDesktop && <BigFilter />}
      {!isDesktop && <SmallFilter />}
    </div>
  );
};

NOTE: We are using SSR and this is the reason I checked window object before using it.

I guess this is a very common scenario to have two different components for small & big devices, with the same facet reference. but I stuck with the following error:

Error: Cannot declare two hierarchical facets with the same name: `myExampleFacet`

Thanks in advance