Do I need to repaint my layer in Mapbox GL after resize?

I am seeing a strange behaviour with my Mapbox GL map:

https://mapbox-gl-test.herokuapp.com/

When I resize the window my data layer (coloured municipalities) disappear. But they are just not visible anymore. When you click on them you still get the popup displayed.

Does this have something to do with the way I sized the Mapbox GL Element? Because of simplicity I jus put all elements (html, body, #root, mapContainer) at width: 100% and height: 100%.

I'v already made an onResize Method on my react component in which I trigger a this.map.resize() but that did not help. When I console.log my this.map.getStyle().layers I still all the layers I created.

All the code lies open: here. The relevant component look's like this:

class MapGL extends PureComponent {
  constructor (props) {
    super(props)

    this.state = {
      isInitialized: false
    }

    this.initMap = this.initMap.bind(this)
    this.addGeoJsonLayer = this.addGeoJsonLayer.bind(this)
    this.onClick = this.onClick.bind(this)
    this.onResize = this.onResize.bind(this)
  }

  componentDidMount () {
    this.initMap()
    window.addEventListener('resize', this.onResize)
  }

  onResize () {
    this.map.resize()
  }

  addGeoJsonLayer () {
    const layers = this.map.getStyle().layers
    const placeLabelLayer = layers.find(layer => layer['source-layer'] === 'place_label').id

    this.map.addLayer({
      'id': 'municipalities',
      'type': 'fill',
      'source': {
        'type': 'geojson',
        'data': this.props.data
      },
      'layout': {},
      'paint': {
        'fill-color': {
          type: 'identity',
          property: 'color'
        },
        'fill-opacity': 1
      }
    }, placeLabelLayer)

    this.setState({ isInitialized: true })
  }

  onClick (e) {
    const centerOfMass = TurfCenterOfMass(e.features[0].geometry)
    new MapboxGL.Popup()
      .setLngLat(centerOfMass.geometry.coordinates)
      .setHTML(this.getPopupContent(e.features[0].properties))
      .addTo(this.map)
  }

  getPopupContent (properties) {
    return `
      <h4 class="mapboxgl-popup-title">
        ${properties.municipality}
      </h4>
      <div class="mapboxgl-popup-text">
        ${format('.2%')(properties.ratio_total)} Männeranteil
      </div>
    `
  }

  initMap () {
    if (!this.mapContainer || this.map) {
      return false
    }

    MapboxGL.accessToken = MAPBOX_ACCESS_TOKEN

    this.map = new MapboxGL.Map({
      container: this.mapContainer,
      style: MAPBOX_STYLE_URL,
      center: this.props.center
    })

    this.map.fitBounds(this.props.bBox, {
      padding: 10
    })

    this.map.on('load', this.addGeoJsonLayer)
    this.map.on('click', 'municipalities', this.onClick)

    return true
  }

  render () {
      return (
        <div
          className={containerStyle}
          ref={(ref) => { this.mapContainer = ref }}
        />
      )
  }
}