You can have global singletons in React too that trigger events without passing them through the component hierarchy. It's just not clean design in my opinion.

You can have global singletons in React too that trigger events without passing them through the component hierarchy. It's just not clean design in my opinion. The same reason we avoid global variables in most applications, frontend or not. If you want to go for a sane way of managing global state you can use redux or context which don't require you passing state up and down the component hierarchy. But in my experience, usually when you design your hierarchy and your data well it makes most sense actually using the hierarchy to your advantage. There's something fractal about it where the higher-level components deal with higher-level state and problems. In the case of the map you have a shared state between the map and the controls which should be explicit in my opinion and not hidden in one of the components' html data attributes. The more complex applications I develop, the more appreciate the concept of having a "single source of truth" and not sprinkling states in child components.