Attention: React ne reconnaît pas le prop `viewState` sur un élément DOM

Warning: React does not recognize the `viewState` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `viewstate` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in span (created by Map)
    in div (created by DeckGL)
    in div (created by DeckGL)
    in DeckGL (created by Map)
    in Map (created by SpatialTemporal)
    in section (created by SpatialTemporal)
    in SpatioMap
    in section
    in Unknown (created by LBS)
    in div
    in div
    in Unknown (created by LBS)
    in LBS (created by Connect(LBS))
    in Connect(LBS) (created by DynamicComponent)
    in DynamicComponent (created by Route)
    in Route (created by BasicLayout)
    in Switch (created by BasicLayout)
    in div (created by BasicLayout)
    in div (created by Basic)
    in Basic (created by Adapter)
    in Adapter (created by BasicLayout)
    in div (created by BasicLayout)
    in BasicLayout (created by Adapter)
    in Adapter (created by BasicLayout)
    in div (created by BasicLayout)
    in BasicLayout (created by Adapter)
    in Adapter (created by BasicLayout)
    in div (created by ContainerQuery)
    in ContainerQuery (created by BasicLayout)
    in DocumentTitle (created by SideEffect(DocumentTitle))
    in SideEffect(DocumentTitle) (created by BasicLayout)
    in BasicLayout (created by Connect(BasicLayout))
    in Connect(BasicLayout) (created by DynamicComponent)
    in DynamicComponent (created by Route)
    in Route (created by DvaRoot)
    in Switch (created by DvaRoot)
    in Router (created by DvaRoot)
    in LocaleProvider (created by DvaRoot)
    in Provider (created by DvaRoot)
    in DvaRoot

import React, { memo, useEffect, useRef, useState } from 'react';
import DeckGL, {HexagonLayer} from 'deck.gl';
import { StaticMap } from 'react-map-gl';

import { INITIAL_VIEW_STATE, LAYER_CONFIGS } from './configs';
import { addMapControl } from './tools';
import { MAPBOX_TOKEN } from './constants';
import styles from './index.less';

const Map = (props) => {
  const {
    controller = true,
    baseMap = true,
    initialViewState = INITIAL_VIEW_STATE,
    layerType = '3d-heatmap',
    renderTooltip = DEFAULT_RENDER_TOOLTIP,
  } = props;

  const [tooltip, setTooltip] = useState({
    object: null,
    // eslint-disable-next-line react/no-unused-state
    x: 0,
    // eslint-disable-next-line react/no-unused-state
    y: 0,
  })

  /**
   * layers render function
   */
  const renderLayers = () => {
    const {
      data,
      accData = [],
      accSpeed = 0.1,
      accRadiusScale = 4,
      accRadiusMaxPixels = 200,
      accColorRange,
      coverage = 1,
      radius,
      elevationScale,
      ...otherProps
    } = props;
    const layers = [];

    layers.push(
      new HexagonLayer({
        ...LAYER_CONFIGS.AugmentHexagonLayer,
        ...otherProps,
        coverage,
        data,
        radius,
        onHover: setTooltip,
      }),
    );

    return layers;
  }

  /**
   * add Control for language switching
   * @param {*} event 
   */
  const addControlHandler = (event) => {
    const map = event && event.target;
    if (map) {
      addMapControl(map);
    }
  };

  const { object } = tooltip || {};

  return (
    <DeckGL
      width="100%"
      height="100%"
      layers={renderLayers()} // eslint-disable-line
      initialViewState={initialViewState}
      controller={controller}
    >
      {baseMap && (
        <StaticMap
          onLoad={addControlHandler}
          reuseMaps
          mapStyle="mapbox://styles/mapbox/dark-v9"
          preventStyleDiffing
          mapboxApiAccessToken={MAPBOX_TOKEN}
        />
      )}
      {object && renderTooltip(tooltip)}
    </DeckGL>
  );
}

const renderTooltip = ({ object: hoveredObject, x: pointerX, y: pointerY }) => {
  // console.log(hoveredObject);
  const {points} = hoveredObject;

  const calLoadTime = () => {
    const rawTime = points.reduce(
      (accumulator, currentValue) => 
      currentValue ? accumulator + currentValue.SPACES : accumulator, 
      0
    ) / points.length;

    return rawTime.toFixed(1);
  }

  return (
    <span
      style={{
        lineHeight: '20px',
        borderRadius: '3px',
        width: '200px',
        left: pointerX+10,
        top: pointerY+5,
      }}
    >
      {`Length: ${points.length}\n`}
    </span>
  )
}