Создание пользовательского элемента управления слоя Leaflet в React

Question

Я пытаюсь полностью воссоздать или реорганизовать функциональность компонента LayersControl в его отдельной отдельной панели, используя ответную листовку.

Я несколько отфильтровал их, и они отлично работают, но я бы хотел настроить внешний вид и расположение элемента Control.

Текущая версия моего приложения Leaflet размещена на страницах github здесь . Вы можете видеть элемент управления справа, который является основным элементом управления Leaflet, но я бы хотел, чтобы значок слева (значок слоев) выполнял то же самое с помощью пользовательских компонентов реакции.

Просто интересно, может ли кто-нибудь указать мне правильное направление, чтобы начать достигать этого!

Это мой текущий рендер для моей карты реактивных листовок:

render() {

      const types = [...new Set(data.map(loc => loc.type))];

      const group = types.map(type =>
        data.filter(loc => loc.type === type)
        .map(({id, lat, lng, name}) =>
          <LayersControl.Overlay name={startCase(toLower(type))}>
            <LayerGroup>
            <Marker key={id} position={[lat, lng]} icon=
              {locationIcon}>
              <Tooltip permanent direction="bottom" opacity={.6}>
                  {name}
              </Tooltip>
          </Marker>
            </LayerGroup>
          </LayersControl.Overlay>
          ));

      return (
        <>
        <ControlPanel />
        <Map
        zoomControl={false}
        center={this.state.center}
        zoom={this.state.zoom}
        maxBounds={this.state.maxBounds}
        maxZoom={10}
        >
          <LayersControl>
            <TileLayer
              url='https://cartocdn-gusc.global.ssl.fastly.net//ramirocartodb/api/v1/map/named/tpl_756aec63_3adb_48b6_9d14_331c6cbc47cf/all/{z}/{x}/{y}.png'
            />
            <ZoomControl position="topright" />
           {group}
          </LayersControl>
        </Map>
        </>
      );
    }