How to share a store between two ReactDOM.render?

Question

JavaScript

Good day!
Tell me how to solve the following problem: there is an application for react. There are several stores based on the context api. Inside the application, a Yandex map is used. A custom plugin is built into the map. To render a react component inside this plugin, call ReactDOM.render . The problem is that this call creates new instances of existing stores with empty values ​​instead of using the existing ones. Is it possible to somehow throw an existing store into this call? So that the component can change the data inside it.
Added an example of what I have now (a very, very simplified example)... https://jsfiddle.net/16zo20v9/7/

Answer 1

The problem was solved through portals. https://learn-reactjs.ru/core/portals
In the plugin, I get the DomNode and pass it into the context. Then, in the main tree, I render the desired component into the resulting element, and through the portal everything works with a bang. Thanks to everyone for participating!

Answer 2

Inside each ReactDOM.render there is a Provider component, it is necessary to put an already created instance of the object created after calling createStore()