What's the best way I can communicate with 2 different React applications (connected to 2 different DOM roots)

So essentially, I have multiple React applications that render on different parts of the DOM (and each one of these apps is its own independent project/directory). For example:

ReactDOM.render(<App1>,  document.getElementById("root1"));
ReactDOM.render(<App2>,  document.getElementById("root2"));

However, now I'm at a point where I need these applications to communicate with each other. What's the best way to accomplish this?

I have thought about using RxJS to communicate with these components, but I'm unsure how they will communicate with each other unless I have some sort of global JS files that can establish an RxJS observer.

Any suggestions? Thanks!