react google map component re-render issue - reactjs

Question

I am trying to re-render the google map component when the state changes. I am using react-redux to change the state. The state changes successfully, but the map doesn't re-render. When I manually refresh the browser then only it takes new state value.
map.js
import React from 'react';
import { compose, withProps,withHandlers } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"
import { MarkerClusterer } from 'react-google-maps/lib/components/addons/MarkerClusterer';
import { connect } from 'react-redux';
const MyMapComponent = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyAoaDS6fIKlYvEHeTaakCxXqp-UwnggoEg",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withHandlers({
onMarkerClustererClick: () => (markerClusterer) => {
const clickedMarkers = markerClusterer.getMarkers()
console.log(`Current clicked markers length: ${clickedMarkers.length}`)
console.log(clickedMarkers)
},
}),
withScriptjs,
withGoogleMap
)((props) =>
<GoogleMap
defaultZoom={props.maps.zoom}
defaultCenter={{ lat:props.maps.lat, lng:props.maps.lng }}
>
<MarkerClusterer
onClick={props.onMarkerClustererClick}
averageCenter
enableRetinaIcons
gridSize={60}
>
{props.markers.map(marker => (
<Marker
key={marker.photo_id}
position={{ lat: marker.latitude, lng: marker.longitude }}
/>
))}
</MarkerClusterer>
</GoogleMap>
);
export default class DemoApp extends React.Component {
componentWillMount() {
this.setState({ markers: [] })
}
componentDidMount() {
console.log("+mymap++++++++");
console.log(this.props.myMap);
this.setState({markers:[{photo_id:1,longitude:76.911270,latitude:11.032595},
{photo_id:2,longitude:75.806682,latitude:11.259169},
{photo_id:3,longitude:77.213780,latitude:28.617671},
{photo_id:4,longitude:78.138991,latitude:9.903245}]})
}
render() {
return (
<MyMapComponent markers={this.state.markers} maps={this.props.myMap} />
)
}
}
In the above code I am giving dynamic values to the defaultcenter property of google map.
home.js
import React from 'react';
import ReactDom from 'react-dom';
import User from './users';
import * as ReactBootstrap from 'react-bootstrap';
import { connect } from 'react-redux';
import Card from './userdetails';
import Paper from 'material-ui/Paper';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import MapIcon from 'material-ui/svg-icons/communication/location-on';
import './homeStyle.css';
import DemoApp from './maps';
class Home extends React.Component {
viewProfile(e) {
console.log(e);
console.log("component in home");
this.props.userSelected(e);
}
render() {
const style = {
paper: {
display: 'inline-block',
float: 'left',
margin: '16px 32px 16px 0',
}
}
return (
<div style={{marginTop:68}}>
<h1>welcome </h1>
<ReactBootstrap.Col sm={12} >
<ReactBootstrap.Row>
<ReactBootstrap.Col sm={4}>
<ReactBootstrap.Col sm={12}>
<Paper style={style.paper}>
<Menu onItemClick={(event,menuitem,index)=>{console.log(menuitem.props.value);this.props.myMap();}} value="map menu">
<MenuItem value="maps" primaryText="My Location" leftIcon={<MapIcon />} />
</Menu>
</Paper>
</ReactBootstrap.Col>
<ReactBootstrap.Col sm={12}>
<DemoApp myMap={this.props.selectedMap} />
</ReactBootstrap.Col>
</ReactBootstrap.Col>
<ReactBootstrap.Col sm={4} style={{border:'1px solid black',paddingBottom:20,marginBottom:78,marginTop:10}}>
<User viewProfile={(e) => this.viewProfile(e)} />
</ReactBootstrap.Col>
{ this.props.selectedUser.id ?
<ReactBootstrap.Col sm={4} style={{border:'1px solid black',marginTop:10}}>
<Card details={this.props.selectedUser} />
</ReactBootstrap.Col>
: null
}
</ReactBootstrap.Row>
</ReactBootstrap.Col>
</div>
)
}
}
const mapStateProps=(state)=> {
console.log(state);
return {
selectedUser:state.userdetails,
selectedMap:state.mapReducer
}
}
const mapDispatchProps=(dispatch)=> {
return {
userSelected:(data)=> {
dispatch({type:"USER_SELECTED",data});
},
myMap:()=>{
dispatch({type:"MAPS"});
}
}
}
export default connect(mapStateProps,mapDispatchProps)(Home);
In the above code (home.js) <DemoApp /> is the map component and the state properties are passed through the props to it. When the user clicks on the menu item it dispatches an action called 'MAPS' and the state changes successfully, but the <DemoApp /> component doesn't re-render with its new values. What is the issue here?