Vfrdtyky

My problem is the following.
I am trying to add some markers to the map and make them draggable.
i add markers with the onclick method ( the code will be below)
but my problem is i dont know how to update the markers coordinates with the onDragEnd method...
I render the markers with a map because the number of markers is not fixed. it depends on the user's click.

export default class Map extends Component {

   constructor(props) { 

   super(props);



    this.state = {

      viewport: {

        latitude: 35.82004085,

        longitude: 139.58855534,

        zoom: 17,

        bearing: 0,

        pitch: 0

      },

      markers:{

        "type": "MarkerColection",

        "markersList":

      },

      events: {},

      movingMarker:

    };

  }  // end construstor



_updateViewport = viewport => this.setState({

viewport:{...this.setState.viewport, ...viewport}

});





_logDragEvent(name, event) {

  this.setState({

     events: {

     ...this.state.events,

     [name]: event.lngLat,

     }

  })

 }



_onMarkerDragStart = (event) => {

   this._logDragEvent('onDragStart', event);

};



_onMarkerDrag = (event) => {

  this._logDragEvent('onDrag', event);

};



_onMarkerDragEnd = (event) => {

  this._logDragEvent('onDragEnd', event);



  var newMovingMarker= [

      event.lngLat[0],

      event.lngLat[1]

    ];



  ///////HERE I WOULD LIKE TO UPDATE THE MARKER POSITION///

  ///////WITH THIS COORDINATES!!!!!////////////////////////

  /////////////////////////////////////////////////////////

  this.setState({movingMarker: newMovingMarker});

 };







_renderMarker = (marker, index) => {

  const {movingMarker} = this.state;

  return (

    <Marker 

        key={`marker-${index}`}

        latitude={marker.coordinates[1]} 

        longitude={marker.coordinates[0]}

        offsetLeft={-10} 

        offsetTop={-10}

        draggable={true}

        onDragStart={this._onMarkerDragStart}

        onDrag={this._onMarkerDrag}

        onDragEnd={this._onMarkerDragEnd} 

        >

        <span class='glyphicon glyphicon-flag'></span>

      </Marker>



  );

 }



onMapClick = event => {





    var coord = event.lngLat;

    const {markers} = this.state;



    var marker = {

      "type":"marker",

      "coordinates": [

        coord[0],

        coord[1]

      ],

     "properties": {

        "id": String(new Date().getTime())

     }

   };  



   markers.markersList.push(marker);



  this.setState({markers: markers});



};  // end of onMapClick



render() {

  const {viewport, markers} = this.state;







  return(

    <MapGL

      {...viewport}

      width="100%"

      height="100%"

      mapStyle= "mapbox://styles/mapbox/streets-v10"

      mapboxApiAccessToken={TOKEN}

      onViewportChange={this._updateViewport}

      onClick={this.onMapClick}>



      {markers.markersList.map(this._renderMarker) }



      <div className="nav" style={navStyle}>

      <NavigationControl onViewportChange={this._updateViewport} />

      </div>

    </MapGL>





  );  // end of return



 }  // end of render

 }

I can get the coordinate after onDragEnd, but i dont know how to correctly update each marker.....

I really need help on it...
Thank you guys