Как в react-yandex-maps показать весь город пользователя на карте?

Есть карта, нужно при загрузке страницы определить город пользователя и отмасштабировать карту так, чтобы он весь вмещался.

import React from "react";
import { YMaps, Map, Placemark, GeolocationControl } from "react-yandex-maps";

class LocationMap extends React.Component {
  constructor(props) {
  super(props);

  this.state = {
    coordinates: null,
    center: [ 0, 0 ],
  }

}

onLoadMap(instance) {
  console.log(instance);
  const location = instance.geolocation.get();
  console.log(location);
}

onBoundsChange = e => {
  this.setState({
    center: e.get('target').getCenter(),
  });

  this.props.newCoordinates(e.get('target').getCenter());
}

render() {
  const coordinates = this.props.coords;
  const mapData = {
    center: coordinates || [55.684758, 37.738521],
    zoom: 17,
    behaviors: ["default", "scrollZoom"],
    controls: [],
    yandexMapDisablePoiInteractivity: false,
  };

const mapOptions = {
  iconLayout: "default#image",
  iconImageHref: mapIcon,
  iconImageSize: [30, 42],
  iconImageOffset: [-3, -42],
};

return (
  <YMaps query={{apikey: 'key' }}>
    <Map
      defaultState={mapData}
      onLoad={(instance) => this.onLoadMap(instance)}
      modules={["geolocation", "geocode"]}
      instanceRef={this.props.instanceRef}
      onBoundsChange={this.onBoundsChange}
    >
      { [coordinates].map((coordinate) => (
          <Placemark
            geometry={coordinate}
            key={coordinate}
            options={mapOptions}
            draggable={false}
          />
        )) }
      <GeolocationControl options={{ position: {bottom: 50, right: 30} }} />
    </Map>
  </YMaps>
);
}
}

export default LocationMap;