React google maps

Hi Experts,
I have created map with googles map react with markers and infow window, I am working on dragging the marker into a new location, I can drag the marker but I dont know how to save its new location in the state, so when I refresh the map, the marker will stay at the new locatoin.
any help will be appreciated .
here import React, { Component } from 'react';

import axios from 'axios';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';


const style = {
  width: '100%',
  height: '100%'
}

class MapContainer extends Component {

 
   constructor (props){
     super(props);
     this.state = {
     position:  {lat: 51.56613,
     lng: -3.76831},
     showingInfowWindow: false,
     activeMarker: {}, /**shows the active marker upon click */
     selectedPlace:{}, /** shows the infowindow to the selected places upon a marker */
     sensors: [] ,
     markers: []
    };
  }
 


   onMarkerDragStart = (event) => {
    const {latitude, longitude} = event;
  }

  onMarkerDragEnd = (event) => {
    const {latitude, longitude} = event;
    this.setState({latitude, longitude})
  }

  onMarkerDrag =(event) => {
    const {latitude, longitude} = event;
  }

  /**we need to add event handler when the map and the marker are clicked */
  componentDidMount() {
     axios.get('http://localhost:5000/aqm/data/display')
      .then(response => {
         this.setState({sensors:response.data})
          console.log(response.data);
        
    });  
  }
 
  onMarkerClick = (props, marker, e) => 
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfowWindow: true
    });
    
  onMapClicked = props => {
    if (this.state.showingInfowWindow){
      this.setState({
        showingInfowWindow: true,
        activeMarker:null
      });
    }
  }
 
  addMarker =(mapProps, map) => {
    var marker = new window.google.maps.marker({
      position: {},
      map: map
     
    });
  }

  onClose = props => {
    if(this.state.showingInfowWindow){
      this.setState({
        showingInfowWindow: false,
        activeMarker: null
      });
    }
  }

  render() {
    
    const google = window.google;
    const {sensors} = this.state;
    return(
     <div>
        <Map 
            google ={this.props.google}
            zoom={13}
            className={'map'}
            styel= {style}
            
            initialCenter ={{
              lat: 51.56613,
              lng: -3.76831,
              mapTypeId: google.maps.MapTypeId.SATELLITE
            }}
        >
        
           {sensors.map(sensor => (
          /** Assign ref attribute to store a refrence to a marker node */
            <Marker 
              key       ={sensor.id}
              name      ={sensor.name}
              content   ={sensor.id} 
              position  ={{lat:sensor.latitude, lng: sensor.longitude}}
              onClick   ={this.onMarkerClick}
              draggable ={true}
              //onDragend ={this.onMarkerDragEnd}
            />
           ))}
            <InfoWindow
               marker ={this.state.activeMarker}
               visible={this.state.showingInfowWindow}
               onClose={this.onClose}
            >
            <div>
               <h4>{this.state.selectedPlace.name}</h4>
               
           </div>
                 
            </InfoWindow>
       </Map>    
    </div>
       
      )
  }
}

export default GoogleApiWrapper({
  apiKey: ("AIzaSyDDszQVPh6VeZ8MuCwP316gfneUJK_oUtw")
})(MapContainer)

Select allOpen in new window

 is my map code: