TypeError: Cannot read property 'addLayer' of undefined

[lalittolani]

import React, { Component } from 'react'
import {
Circle,
FeatureGroup,
LayerGroup,
LayersControl,
Map,
Marker,
Popup,
Rectangle,
TileLayer,
} from 'react-leaflet'
// import { render } from 'react-dom'
import LocateControl from 'react-leaflet-locate-control'
import 'leaflet/dist/leaflet.css'
const { BaseLayer, Overlay } = LayersControl
const locateOptions = {
position: 'topright',
strings: {
title: 'Show me where I am, yo!'
},
onActivate: () => {} // callback before engine starts retrieving locations
}

export default class App extends Component {
render() {
const center = [-8.64,115.17]
const rectangle = [[51.49, -0.08], [51.5, -0.06]]
const mapHeight = "100vh"
const mapWidth = "100vw"

return (
  <Map center={center} zoom={13} style={{ height: mapHeight, width: mapWidth }}>
  <LocateControl options={locateOptions} startDirectly/>
   
  </Map>
)

}
}
MY ERROR

TypeError: Cannot read property 'addLayer' of undefined
NewClass.addTo
node_modules/react-leaflet-locate-control/node_modules/leaflet/dist/leaflet-src.js:6429
6426 | * Adds the layer to the given map or layer group.
6427 | */
6428 | addTo: function (map) {

6429 | map.addLayer(this);
6430 | return this;
6431 | },
6432 |
View compiled
NewClass.onAdd
node_modules/react-leaflet-locate-control/dist/lib/L.Control.Locate.js:202
199 | var container = L.DomUtil.create('div', 'leaflet-control-locate leaflet-bar leaflet-control');
200 |
201 | this._layer = this.options.layer || new L.LayerGroup();
202 | this._layer.addTo(map);
203 | this._event = undefined;
204 | this._prevBounds = null;
205 |
View compiled
NewClass.addTo
node_modules/react-leaflet-locate-control/node_modules/leaflet/dist/leaflet-src.js:4692
4689 | this.remove();
4690 | this._map = map;
4691 |
4692 | var container = this._container = this.onAdd(map),
4693 | pos = this.getPosition(),
4694 | corner = map._controlCorners[pos];
4695 |