[docs] React control example doesn't really work

[hooch]

Bug report in v4 (docs)

• All peer dependencies are installed: React, ReactDOM and Leaflet.
• Using the latest version of React and ReactDOM v18.
• Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
• Using the latest v4 version of React-Leaflet.
• The issue has not already been reported.
• Make sure you have followed the quick start guide for Leaflet.
• Make sure you have fully read the documentation and that you understand the limitations.

The provided documentation for creating a React component-based leaflet-style control don't properly insert the control into Leaflet's control hierarchy.

<div className={positionClass}>
  <div className="leaflet-control leaflet-bar">{minimap}</div>
</div>

Expected behavior

The control stacks with other controls within the same positionClass.

Actual behavior

The control sits on top of other controls in the same positionClass making them inaccessible and effectively invisible.

Steps to reproduce

An example of the ZoomControl being hidden behind the example React control is available here

I'm interested to see if the React control example can be updated in such a way to make this work as expected.

Alternatively, for what it's worth, I was able to resolve my problem by using a third party package