undefined is not an object (evaluating 'map._controlCorners')

Hello.

I want to use the Control component but I got this error undefined is not an object (evaluating 'map._controlCorners').

This is the code

      <Map
          className="Map"
          center={[lng, lat]}
          zoom={zoom}
          zoomControl={false}
          ref={this.mainMap}
        >
          <ZoomControl position="bottomright" />
          <TileLayer
            attribution="Tiles &amp;copy; Esri &amp;mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
            url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
          />
          <Control position="topleft">
            <button 
              onClick={ () =>  {console.log("works")}}
            >
              Reset View
            </button>
          </Control>
      </Map>

and those are the dependencies:

    "leaflet": "^1.4.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-leaflet": "^2.2.0",
    "react-leaflet-control": "^2.0.0",
    "react-scripts": "2.1.3"

I'm new using Leaflet and I don't know how to solve this error :( .

LiveBy / react-leaflet-control

undefined is not an object (evaluating 'map._controlCorners') #30