React-map-gl: Markers won't render on Map

[Monichre]

Breaking this issue out on to its own.
Using:
"mapbox-gl": "^0.38.0",
"react-map-gl": "^3.0.0-beta.3"

Repeated the code step for step from the docs and examples and my json data just won't load the actual Marker component on the map but the values are present.

`import React, {Component} from 'react';

import MapGL, { Layer, Feature, Marker } from 'react-map-gl';
import Immutable from 'immutable';

class KarlsMap extends Component {

constructor(props) {
    super(props);

    this.state = {

        viewport: {
            width: window.innerWidth,
            height: 250,
            latitude: props.userLat,
            longitude: props.userLon,
            zoom: 10,
            isDragging: false,
            startDragLngLat: [props.userLat, props.userLon],
            pitch: 50,
            bearing: 0
        }
    };
    this.onViewportChange = this.onViewportChange.bind(this);

}
onViewportChange(viewport) {
    this.setState({viewport: viewport });
}
handleClick() {
    console.log('map click');
}
componentDidMount() {
    console.log('Karls Map has mounted');
}
_renderMarkers(eventMarker, i) {
    const {coordinates, id} = eventMarker;
    return (
        <Marker key={i} longitude={coordinates[1]} latitude={coordinates[0]}>
            <div id={id} className="marker"></div>
        </Marker>
    );
}
render() {
    const { viewport } = this.state;
    return (
        <MapGL
            {...viewport}
            mapboxApiAccessToken={API_TOKEN}
            dragRotate
            onViewportChange={this.onViewportChange}>

            {this.props.eventMarkers.map(this._renderMarkers)}        
        </MapGL>

    );
}

}
export default KarlsMap;
`

[Pessimistress]

Without further information, I'm gonna guess you don't have any css styles targeting the marker class? <Marker /> components are simply containers that are placed at the given coordinates. Since you put an empty div inside, it's not going to render any visible elements by default.