Can't get controls to display on react leaflet mapContainer

Question

Adding a map component to my app using react leaflet. The map displays fine, along with geoJSONs. Popups will go where I want them but are invisible.

The biggest issue is that the zoom controls (+- buttons) that I see in every online example have not been displaying. Map Component

Here is the code for it:

import React, { PureComponent, Component} from 'react'
import './Map.css'
import 'leaflet/dist/leaflet.css'
import { MapContainer, TileLayer, Marker, GeoJSON, ZoomControl, Popup} from 'react-leaflet'


class MapView extends PureComponent {
  constructor(props) {
    super(props);
  }
  render () {
    var position = [40.8, -74.15]

return (
  
    <MapContainer
      className='Map-Container'
      center={position}
      zoom={14}
      minZoom={10}
      maxZoom={16}
    >
      <ZoomControl position="topleft" />
      <Marker position={position}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
      <TileLayer
        className='TileLayer'
        url='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
        attribution='Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
      />
    </MapContainer>
)

} }

export default MapView

Answer 1

I have found one video which shows how you can set zoom and can fix it. https://egghead.io/lessons/react-change-the-react-leaflet-map-zoomcontrol-location-and-icons and I will also check in codesandbox as well if I can find a proper solution for you:)

This is on stackoverflow.

React-Leaflet custom markers with condition