Tengo una aplicación escrita en reaccionar (arrancada con cra) y configuro una propiedad de ventana global (como un objeto) cuando un componente se procesa inicialmente dentro de un gancho useEffect y se configura correctamente. Si inspecciono el valor de window.myConfig con herramientas de desarrollo en el navegador, veo que el objeto tiene las propiedades correctas. Cuando un usuario selecciona una opción de un menú desplegable, necesito restablecer el objeto, pero el problema es que el objeto window.myConfig (la propiedad global en la ventana) no obtiene el nuevo valor, mantiene el valor anterior. ¿Hay alguna manera especial de hacer esto usando reaccionar? Aquí hay un ejemplo de código:

---EDITAR---

Traté de agregar más información sobre lo que estoy tratando de lograr. No puedo usar context o redux. La razón por la que estoy usando una variable global es porque la usa un widget de JavaScript de un tercero y estoy cambiando a la configuración del widget cuando el usuario selecciona una opción de un menú desplegable. Espero que esto sea más claro.

 const config1 = { name: 'name1', }; const config2 = { name: 'name2', }; const App = () => { const [config, setConfig] = useState(config1); useEffect(() => { window.myConfig = config; return () => {}; }, [config]); const onDropdownSelect = (option) => { if (option === '1') setConfig(config1); else if (option === '2') setConfig(config2); }; // ... };