Estoy tratando de inyectar debajo de reaccionar mfe en otra aplicación de shell angular. Pero, se está cargando la primera vez, pero cuando se ocultan o eliminan de dom y luego nuevamente no se puede cargar.

¿Puede ayudarme con lo que está mal en el siguiente código para que puedan volver a cargar u ocultar/mostrar correctamente?

Gracias por adelantado.

 import React, { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import AchPayment from "./AchPayment"; //import createCustomElement from "react-custom-element-builder"; const mount = (el, props) => { const { consumerName, token, achTransactionRequest } = props; const root = createRoot(el!); if (consumerName) { if ( consumerName.toUpperCase() == "APEX" || consumerName.toUpperCase() == "MYFINANCING" ) { class AchPaymentElement extends HTMLElement { connectedCallback() { root.render( <div> <AchPayment {...props} /> </div> ); } } customElements.get("ach-payment-element") || customElements.define("ach-payment-element", AchPaymentElement); } else { return root.render(<h1>Invalid Consumer !</h1>); } } else { return root.render(<h1>Invalid Consumer !</h1>); } }; const props = { consumerName: "MyFinancing", }; const devRoot = document.querySelector("#_myMfe"); mount(devRoot, props);