So what I'm trying to do is, I want to change the center of map after I get the users lat and lng,
the code below will make the problem clearer:

<LeafletMap

  center={this.state.UserCurrentPosition}

  zoom={17}

  maxZoom={20}

  attributionControl={true}

  zoomControl={false}

  doubleClickZoom={true}

  scrollWheelZoom={true}

  dragging={true}

  animate={true}

  easeLinearity={0.35}

>

  <TileLayer url='https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png'/>

  <Marker 

    position={this.state.UserCurrentPosition} 

    icon={L.divIcon({

      className: 'user-marker',

      html: `<div  class='icon icon-location'><span class="circle"></span></div>`,

      iconSize: [40, 40],

      iconAnchor: [24, 24]

    })}>

  </Marker>

</LeafletMap>

and below is what I'm trying to do:

componentDidMount() {

  navigator.geolocation.getCurrentPosition(this.showPosition);

}



showPosition = (position) => {

  this.setState({ UserCurrentPosition: [position.coords.latitude, position.coords.longitude] })

}

So after I use setState to change the user's current position, the marker's position gets updated, but the map's position no, so I was wondering if i'm doing something wrong, or how can it be accomplished.