React-google-maps state update causes infoWindow into infinite loop render

Question

So I have this weird problem with react-google-maps or maybe it's my limited understanding on how state works in react.

// @flow
import React, { Component } from 'react';
import { Marker } from 'react-google-maps';
import InfoBox from './InfoBox';

type MapMarkerPropsType = {
   offerId: number,
   location: Object,
}
type MapMarkerStateType = {
   isHovered: boolean,
}

class MapMarker extends Component<MapMarkerPropsType, 
   MapMarkerStateType> {
      constructor (props: MapMarkerPropsType) {
        super(props);

        this.state = {
          isHovered: false
        };
     }

onMouseOver = () => {
    //HERE you have access to offerId alter store
    console.log('onMouseOver', this.props.offerId);
    this.setState({ isHovered: true });
};

onMouseOut = () => {
    //HERE you have access to offerId alter store
    console.log('onMouseOut', this.props.offerId);
    this.setState({ isHovered: false });
};

render () {

    return (
        <div>
            {
                this.state.isHovered &&
                <InfoBox defaultPosition={this.props.location}/>
            }
            <Marker
                position={this.props.location}
                onMouseOver={this.onMouseOver}
                onMouseOut={this.onMouseOut}
                icon={`${window.location}/icons/Android.png`}
            />
        </div>
    );
 }
}

export default MapMarker;

this is how it works without altering the state (look at the console)

Without altering state

and here when I am adding state changes

With state

Answer 1

OK after reading the docs properly I understood that <InfoBox defaultPosition={this.props.location}/> should be wrapped inside <Marker/>