how to stop map component re-mount after the state update (react-google-maps)

Question

I use 'react-google-maps'

There are some checkboxes and one GoogleMap component in my page. When I update react state after I click checkbox. The GoogleMap will unmount and mount again. The GoogleMap doesn't use the state which be changed by checkbox. but GoogleMap still re-mount.

The most strange is that GoogleMap unmount. I think GoogleMap should re-render. Then I can use shouldComponentUpdate() to prevent GoogleMap re-render. but it triggers unmount when I setState with the state which doesn't relate to GoogleMap.

I declare GoogleMapDOM in the render function, and I use GoogleMapDOM in html like ''. I think it cause by declare GoogleMapDOM at render. I will check it out.

snippet of render function()

const GoogleMapDOM = compose(
  withProps({
    googleMapURL: googleApiUrl,
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement:<div style={{ height: 600, width: 800 }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withStateHandlers(() => ({
    isInfoWindowOpen: [],
  }), {
    onToggleOpen: ({ isInfoWindowOpen }) => () => ({
      isInfoWindowOpen: !isInfoWindowOpen,
    })
  }),
  lifecycle({
    componentWillReceiveProps(nextProps) {
      console.log('componentWillReceiveProps')
    },
  }),
  withScriptjs,
  withGoogleMap
)((props) => {
  return (
  <GoogleMap>
    {/* The code is omitted */}
  <GoogleMap />
  )});

Can somebody helps me? Thanks.