I have an app written in react (bootstrapped with cra) and I set a global window property (as an object) when a component is initially rendered inside a useEffect hook and it gets set fine. If I inspect the value of window.myConfig with dev tools in the browser, I see the object has the correct properties. When a user selects an option from a dropdown menu I need to reset the object, but the problem is that the window.myConfig object (the global property on the window) does not get the new value, it keeps the old value. Is there a special way to do this using react? Here is a code example:

---EDIT---

I tried to add some more information about what I am trying to achieve. I cannot use context or redux. The reason I am using a global variable is because it is used by a third party javascript widget and I am changing to widget configuration when I user selects an option from a dropdown. I hope this is more clear.

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);
  };

  // ...
};