State subscription between two separately rendered React components

[osamaaaaa]

Hi,

I am rendering two separate components using the ReactDOM.render method and I would like one component to subscribe to the state changes made by the second component. The state subscription doesn't seem to work except for the first time the page is loaded, any changes after that are not updated in the first component. Please see my CodeSandbox for a better idea. Maybe I am approaching this incorrectly. Would appreciate any help!

Codesandbox: https://codesandbox.io/s/serene-carson-87c7b

Thank you!

[dai-shi]

Why not just use the useStore hook? useRef is not reactive, that's why.
https://codesandbox.io/s/lingering-breeze-3dxcd