markers not displaying until map moved slightly or clicked in react-map-gl

Question

This marker is not loading until I scroll or drag the map. Even after refreshing, the marker is not displaying. I had hard coded the value. I'm just looking for the marker to display without dragging or clicking.

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>
    );
  }
}

Answer 1

Use ComponentDidMount() and update viewport Value here. It will work fine.