setState on specific key with ReactJS

I read on some tutorials that we can pass a specific key in parameters of setState in order to update only specific elements. But here is my case :

I use tomchentw's react-google-maps component. I set the options of the map in my App state (then I pass it to the GoogleMap component via props).

app.jsx

constructor() {
    super();
    //Initial value
    this.state = {
        optionsMap:{
        center: {
            lat: 46.8261444,
            lng: 2.2418121
        },
        zoom: 5
    },
        variables: {}
    }
}

map.jsx

render() {
        return (
            <GoogleMapLoader
                containerElement={ <div {...this.props} style={{ height: '500px'}}></div> }
                googleMapElement={
                     <GoogleMap
                        ref="googleMap"
                        {...this.props.optionsMap} //biding map options with spread
                        onIdle={this._handleIdle.bind(this)}>
                     </GoogleMap>
                }
            />
        );
    }


    _handleIdle(event) {
        this.props.updateVarsOptions(this.props.optionsMap);
    }

When I call my updateVarOptions() function (when I moove the map) define in app.jsx, I update the state on the very specific key variables.

app.jsx

_updateVarsOptions(mapOptions) {
        this.setState({
            variables : mapOptions
        });
}

So, I update only the variables key on the state, but when I do the setState, the map is resettings with the default value (center position and zoom). The state is updating the optionsMap key to. I don't understand why.