React sharing state between two different component rendered in two different container

Question

I would like to share the state between these two components using mobx or redux. //index.html page

<div id="component1"></div>
<div id="component2"></div>

//First component
const Component1 = () => {
  return <FirstListComponent />;
});

const firstContainer = document.getElementById('component1');
const rootOne = createRoot(firstContainer); 
rootOne.render(<Component1 />);


//Second component
const Component2 = () => {
  return <SecondListComponent />;
});

const SecondContainer = document.getElementById('component2');
const rootTwo = createRoot(SecondContainer); 
rootTwo.render(<Component2 />);