Маркер перемещения React без повторного рендеринга карты в react-google-maps

Я использую response-google-maps для отображения маркера из данных широты / долготы. Это работает нормально, но при каждом обновлении данных маркера выполняется рендеринг всего компонента. Есть ли способ обновить только маркер? Мой код ниже. Данные поступают быстро, поэтому я разрешаю им обновляться каждые 10 секунд. Я одновременно обновляю маркер и центр.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from '../actions';
import { compose, withProps } from 'recompose';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
import globalStyles from '../App.css';
import styles from '../styles/ViewMap.module.scss';

class ViewMap extends Component {
  constructor() {
    super();
    this.state = {
      lat: 0,
      long: 0,
      updateMap: true
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.state.updateMap){
      return true;
    }
    else {
      return false;
    }
  }

  componentWillUpdate() {
    if (this.state.updateMap) {
      for (var key in this.props.vehicleAggregateData.vehiclesData) {
        if (key === this.props.vin) {
          let latitude = this.props.vehicleAggregateData.vehiclesData[key].position[0];
          let longitude = this.props.vehicleAggregateData.vehiclesData[key].position[1];
          var self = this;
          window.setTimeout(function(){
            self.setState({ updateMap: true, lat: latitude, long: longitude });
          }, 10000);
          self.setState({ updateMap: false});
        }
      }
    }
    else{
      return false;
    }
  }

  render() {
    const MyMapComponent = compose(
      withProps({
        googleMapURL:
          'https://maps.googleapis.com/maps/api/js?key=AIzaSyBitA9VEk3r2trmEW-xXTh_8YDpcIfBwy4&v=3.exp&libraries=geometry,drawing,places',
        loadingElement: <div className = {globalStyles.paperCard} />,
        containerElement: <div style = {{ height: '100%' }} />,
        mapElement: <div style = {{ height: '100%' }} />
        // key:"AIzaSyBitA9VEk3r2trmEW-xXTh_8YDpcIfBwy4"
      }),
      withScriptjs,
      withGoogleMap
    )(props => (
      <GoogleMap defaultZoom = {18} defaultCenter = {{ lat: parseFloat(this.state.lat), lng: parseFloat(this.state.long) }}>
        {props.isMarkerShown && <Marker position = {{ lat: parseFloat(this.state.lat), lng: parseFloat(this.state.long) }} />}
      </GoogleMap>
    ));

    return (
      <div className = {styles.map + " " + globalStyles.cardShadow}>
        <MyMapComponent isMarkerShown />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
      vehicleAggregateData: state.vehicleData
  };
}

function mapDispatchToProps(dispatch) {
  return {
      actions: bindActionCreators(actions, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(ViewMap);