React v18: Map container is being appended to DOM twice

[jtaccinelli]

Likely an issue with React 18 running useEffect hook twice.

See here for the output snippet:

<div class="mapboxgl-map" style="height: 100%; width: 100%">
  <div class="mapboxgl-canary" style="visibility: hidden"></div>
  <div class="mapboxgl-canvas-container mapboxgl-interactive mapboxgl-touch-drag-pan mapboxgl-touch-zoom-rotate"></div>
  <div class="mapboxgl-control-container"></div>
  <div class="mapboxgl-canary" style="visibility: hidden"></div>
  <div class="mapboxgl-canvas-container mapboxgl-interactive mapboxgl-touch-drag-pan mapboxgl-touch-zoom-rotate"></div>
  <div class="mapboxgl-control-container"></div>
</div>