Наведите указатель мыши на deck.gl

Я попал в тупик с deck.gl и надеюсь, что вы мне поможете, ребята. Мне не удалось понять, как вы отображаете свойства полос в примере hexagonLayer, который отображается на официальной веб-странице deck.gl: https://uber.github.io/deck.gl/#/examples/core-Layers/hexagon-layer. Пример, доступный в GitHub, не имеет этой функции, а уровень браузера слишком сложен для меня. Я попытался включить компонент информации о слоях, который встроен в пример браузера слоев, но я не понимаю, что такое (информация), и продолжаю получать эту ошибку:

"Ошибка синтаксического анализа модуля: вам может потребоваться соответствующий загрузчик для обработки этого типа файла.

Большое спасибо за уделенное время! Я новичок в React! Простите, если это банально.

App.js

    import React, {Component} from 'react';
    import {render} from 'react-dom';
    import MapGL from 'react-map-gl';
    import DeckGLOverlay from './deckgl-overlay.js';
    import Controls from './components/controls';
    import {csv as requestCsv} from 'd3-request';
    import LayerInfo from './components/layer-info';
    // Set your mapbox token here
    const MAPBOX_TOKEN =MBToken

    // Source data CSV
    const DATA_URL =
      'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv'; // eslint-disable-line

    class Root extends Component {
      constructor(props) {
        super(props);
        this.state = {
          datad: {
            package: 'react-dat-gui',
            radius: 1100,
            isAwesome: true,
            feelsLike: '#2FA1D6',
          },
          viewport: {
            ...DeckGLOverlay.defaultViewport,
            width: 500,
            height: 500
          },
          data: null,
          hoveredItem: null,
          clickedItem: null,
          queriedItems: null
        };



      requestCsv(DATA_URL, (error, response) => {
          if (!error) {
            const data = response.map(d => [Number(d.lng), Number(d.lat)]);
            this.setState({data});
          }
        });
      }

      componentDidMount() {
        window.addEventListener('resize', this._resize.bind(this));
        this._resize();
      }


      _resize() {
        this._onViewportChange({
          width: window.innerWidth,
          height: window.innerHeight
        });
      }

      _onViewportChange(viewport) {
        this.setState({
          viewport: {...this.state.viewport, ...viewport}
        });
      }

      onParentUpdate(datad) {
        this.setState({ datad });
      }

      onHover(info) {

  this.setState({hoveredItem: info});
}


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

    return (
      <div>
          <MapGL
            {...viewport}
            mapStyle="mapbox://styles/mapbox/dark-v9"
            onViewportChange={this._onViewportChange.bind(this)}
            mapboxApiAccessToken={MAPBOX_TOKEN}
          >
            <DeckGLOverlay viewport={viewport}
            data={data || [] }
            datad = {this.state.datad }
            onLayerHover= {this.onHover}
          />
          </MapGL>

          <Controls
          onUpdate = {(datad) => this.onParentUpdate(datad)}
          datad = {this.state.datad}
          />

          <LayerInfo
            hovered={hoveredItem}
          />

         </div>

        );
      }
    }

    render(<Root />, document.body.appendChild(document.createElement('div')));

слой-info.js

import React, {PureComponent} from 'react';

export default class LayerInfo extends PureComponent {
  _infoToString(info) {
    const object = info.feature || info.object;
    if (!object) {
      return 'None';
    }
    const props = object.properties || object;
    return JSON.stringify(props);
  }

  render() {
    const {hovered, clicked, queried} = this.props;

    return (
      <div>
        {hovered && (
          <div>
            <h4>Hover</h4>
            <span>
              Layer: {hovered.layer.id} Object: {this._infoToString(hovered)}
            </span>
          </div>
        )}
      </div>
    );
  }
}

deckgl-overlay.js

import React, {Component} from 'react';
import {render} from 'react-dom';
import MapGL from 'react-map-gl';
import DeckGLOverlay from './deckgl-overlay.js';
import Controls from './components/controls';
import {csv as requestCsv} from 'd3-request';
import LayerInfo from './components/layer-info';
// Set your mapbox token here
const MAPBOX_TOKEN = MBToken; // eslint-disable-line

// Source data CSV
const DATA_URL =
  'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv'; // eslint-disable-line

class Root extends Component {
  constructor(props) {
    super(props);
    this.state = {
      datad: {
        package: 'react-dat-gui',
        radius: 1100,
        isAwesome: true,
        feelsLike: '#2FA1D6',
      },
      viewport: {
        ...DeckGLOverlay.defaultViewport,
        width: 500,
        height: 500
      },
      data: null,
      hoveredItem: null,
      clickedItem: null,
      queriedItems: null
    };

    requestCsv(DATA_URL, (error, response) => {
      if (!error) {
        const data = response.map(d => [Number(d.lng), Number(d.lat)]);
        this.setState({data});
      }
    });
  }

  componentDidMount() {
    window.addEventListener('resize', this._resize.bind(this));
    this._resize();
  }


  _resize() {
    this._onViewportChange({
      width: window.innerWidth,
      height: window.innerHeight
    });
  }

  _onViewportChange(viewport) {
    this.setState({
      viewport: {...this.state.viewport, ...viewport}
    });
  }

  onParentUpdate(datad) {
    this.setState({ datad });
  }

  onHover(info) {
  this.setState({hoveredItem: info});
}


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

    return (
      <div>
          <MapGL
            {...viewport}
            mapStyle="mapbox://styles/mapbox/dark-v9"
            onViewportChange={this._onViewportChange.bind(this)}
            mapboxApiAccessToken={MAPBOX_TOKEN}
          >
            <DeckGLOverlay viewport={viewport}
            data={data || [] }
            datad = {this.state.datad }
            onLayerHover= {this.onHover}
          />
          </MapGL>

          <Controls
          onUpdate = {(datad) => this.onParentUpdate(datad)}
          datad = {this.state.datad}
          />

          <LayerInfo
            hovered={hoveredItem}
          />

     </div>

    );
  }
}

render(<Root />, document.body.appendChild(document.createElement('div')));

обновление: теперь я получаю еще одну ошибку «Uncaught ReferenceError: hoveredItem is not defined»