reactjs - マップがわずかに移動するか、react-map-gl でクリックされるまでマーカーが表示されない

Question

このマーカーは、マップをスクロールまたはドラッグするまで読み込まれません。更新してもマーカーが表示されません。値をハードコーディングしました。ドラッグしたりクリックしたりせずに表示するマーカーを探しています。

import React from 'react';
import Icon from 'react-fa';

import ReactMapGL, { Marker } from 'react-map-gl';

export default class EdgeExplorer extends React.Component {
  state = {
    viewport: {
      width: window.innerWidth,
      height: window.innerHeight,
      latitude: 36.778259,
      longitude: -119.417931,
      zoom: 4,
      mapboxApiAccessToken: 'I will write my token here',
    }
  }
  staticMarker = () => {
    return (
      <Marker latitude={37.773972} longitude={-122.431297} offsetLeft={-2}
        offsetTop={-22}>
        <Icon name="map-pin" className="text-white" />
      </Marker>
    );
  }
  render() {
    const { viewport } = this.state;
    return (
      <ReactMapGL
        {...viewport}
        mapStyle='mapbox://styles/mapbox/dark-v9'
        onViewportChange={v => this.setState({ viewport: v })
        }>
        {this.staticMarker()}
      </ReactMapGL>
    );
  }
}