Module Fedration :- While a new module is loaded onto the container whole layout (or the app is re-rendered) - webpack-5

Question

Here is my system.js code for loading a component
export const loadComponent = (scope, module) => async () => {
// Initializes the share scope. This fills it with known provided modules from this build and all remotes
await __webpack_init_sharing__('modern');
const container = window[scope]; // or get the container somewhere else
// Initialize the container, it may provide shared modules
await container.init(__webpack_share_scopes__.default);
const factory = await window[scope].get(module);
const Module = factory();
return Module;
};
I have a sidebar and a header which re-renders every-time I navigate to a different page from the side bar.
Here is my layout.js code
import React, { useEffect, useState } from 'react';
import Header from '../header/header';
import Sidebar from '../sidebar/sidebar';
import './layout.scss';
const Layout = (props) => {
console.log(props, "props")
const [isIframe, setIsIframe] = useState(false);
const [branchIdFromUrl, setBranchIdFromUrl] = useState(null);
useEffect(() => {
const query = window?.location?.search;
const urlParams = new URLSearchParams(query);
const iframe = urlParams.get('iif');
const branch = urlParams.get('branchId');
if (iframe) {
setIsIframe(true);
}
if (branch) {
setBranchIdFromUrl(branch);
}
}, []);
return (
<div>
<Header isIframe={isIframe} branchIdFromUrl={branchIdFromUrl} />
<div className={isIframe ? 'main-wrapper-without-padding' : 'main-wrapper'}>
<div className="flex h-full">
<Sidebar />
<div className="flex-grow">
<div className="content-wrapper overflow-auto">
{/* <SearchBar/> */}
{/* <BreadCrumb/> */}
<div className="p-5">{props.children}</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default Layout;
If any more information is needed let me know.