Loading map with Mapbox GL JS + React JS

mapbox.css

.map{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

MapLoad.js

import React, { Component } from 'react';
import mapboxgl from 'mapbox-gl';
import './mapload.css';


mapboxgl.accessToken = 'Your-Mapbox-Token';
var map;
class MapLoad extends Component {

    constructor(props) {
        super(props);
        this.state = {
            lat: 27.85380233830591,
            lng: 78.37183893820759,
            zoom: 8.5
        };
    }

    componentDidMount() {
        const { lat, lng, zoom } = this.state;
        map = new mapboxgl.Map({
            container: this.mapDiv,
            style: 'mapbox://styles/mapbox/streets-v9',
            center: [lng, lat],
            zoom: zoom
        });
    }

    render() {
        return (
            <div>
                <div ref={e => this.mapDiv = e} className="map" />
            </div>
        );
    }
}

export default MapLoad;