I'm trying to use react-leaflet to display a map. I use the code from this fiddle which is working, but on my computer I have this output

Here is my code :

DeviceMap.js

import React from 'react'

import { Map, Marker, Popup, TileLayer } from 'react-leaflet';



export class DeviceMap extends React.Component {

  constructor() {

    super();

    this.state = {

      lat: 51.505,

      lng: -0.09,

      zoom: 13,

    };

  }



  render() {

    const position = [this.state.lat, this.state.lng];

    return (

      <Map center={position} zoom={this.state.zoom} scrollWheelZoom={false}>

        <TileLayer

          attribution='&copy; <a href=http://osm.org/copyright>OpenStreetMap</a> contributors'

          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'

        />

        <Marker position={position}>

          <Popup>

            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>

          </Popup>

        </Marker>

      </Map>

    );

  }

}



export default DeviceMap

DeviceTabs.js

export class DeviceTabs extends React.Component {

  state = {

    index: 0

  };



  handleTabChange = (index) => {

    this.setState({ index })

  };



  render () {

    return (

      <Tabs index={this.state.index} onChange={this.handleTabChange}>

        <Tab label='Values'>

          <DeviceTable {...this.props} />

        </Tab>

        <Tab label='Map'>

          <div className={style.leaflet}>

            <DeviceMap />

          </div>

        </Tab>

      </Tabs>

    )

  }

}

style.scss

.leaflet {

  height: 300px;

  width: 100%;

}

There is no error in the console, and I have no more idea where to search. Since the fiddle is working it is not a bug. Did I miss something ?