React-map-gl (GeoJSON map example): data not updating in map through control panel (year slider)

Question

I am trying to implement GeoJSON example from here : https://uber.github.io/react-map-gl/#/Examples/geo but when I try to change the year slider from year to year, data and dataLayers are staying the same and not changing at all.

I've copied the same code and integrated in my 'create-react-app', map is rendered the same way as in example but data are staying static and refusing to change from control panel.

Can somebody please tell me what I am missing ?

My code is this:

const MAPBOX_TOKEN =
  "pk.eyJ1IjoiZnN5bHFhIiwiYSI6ImNrNXp2enFmMzAxbDAzb21iemMxN2dqY2MifQ.TvYAgClf77WIygyRg_Sa4Q"; // Set your mapbox token here

export default class GeoApp extends Component {
  state = {
    year: 2015,
    data: null,
    hoveredFeature: null,
    viewport: {
      latitude: 40,
      longitude: -100,
      zoom: 3,
      bearing: 0,
      pitch: 0
    }
  };



  componentDidMount() {
     requestJson(
      "https://raw.githubusercontent.com/uber/react-map-gl/master/examples/.data/us-income.geojson",
      (error, response) => {
        if (!error) {
          this._loadData(response);
          console.log(response);
        }
      }
    );
  }

  _loadData = data => {
    updatePercentiles(data, f => f.properties.income[this.state.year]);
    this.setState({ data });
  };

  _updateSettings = (name, value) => {
    console.log(`name:${name}, value:${value}`);
    if (name === "year") {
      this.setState({ year: value });

      const { data } = this.state;
      if (data) {
        console.log("data before", data);
        updatePercentiles(data, f => f.properties.income[value]);
        console.log("data after", data);
        // trigger update
        this.setState({ data: { ...data } });
      }
      console.log("data", data);
    }
  };

  _onViewportChange = viewport => this.setState({ viewport });

  _onHover = event => {
    const {
      features,
      srcEvent: { offsetX, offsetY }
    } = event;
    const hoveredFeature =
      features && features.find(f => f.layer.id === "data");

    this.setState({ hoveredFeature, x: offsetX, y: offsetY });
  };

  _renderTooltip() {
    const { hoveredFeature, x, y } = this.state;

    return (
      hoveredFeature && (
        <div className="tooltipi" style={{ left: x, top: y }}>
          <div>State: {hoveredFeature.properties.name}</div>
          <div>Median Household Income: {hoveredFeature.properties.value}</div>
          <div>
            Percentile: {(hoveredFeature.properties.percentile / 8) * 100}
          </div>
        </div>
      )
    );
  }

  render() {
    const { viewport, data } = this.state;

    return (
      <div style={{ height: "100%" }}>
        <MapGL
          {...viewport}
          width="50%"
          height="50%"
          mapStyle="mapbox://styles/mapbox/light-v9"
          onViewportChange={this._onViewportChange}
          mapboxApiAccessToken={MAPBOX_TOKEN}
          onHover={this._onHover}
        >
          <Source type="geojson" data={data}>
            <Layer {...dataLayer} />
          </Source>
          {console.log("layers", dataLayer)}
          {this._renderTooltip()}
        </MapGL>

        <ControlPanel
          containerComponent={this.props.containerComponent}
          settings={this.state}
          onChange={this._updateSettings}
        />
      </div>
    );
  }
}
export function RenderToDom(container) {
  render(<GeoApp />, container);
}

updatePercentelies function is this :

import { range } from "d3-array";
import { scaleQuantile } from "d3-scale";

export function updatePercentiles(featureCollection, accessor) {
  const { features } = featureCollection;
  const scale = scaleQuantile()
    .domain(features.map(accessor))
    .range(range(9));
  features.forEach(f => {
    const value = accessor(f);
    f.properties.value = value;
    f.properties.percentile = scale(value);
  });
}