Reactjs возвращает неопределенное от карты при попытке увеличения при использовании карт Google

Question

Я создаю приложение, в котором карта, отображающая различные маркеры, которые содержат данные.Когда я масштабирую, я хочу изменить количество отображаемых маркеров.Однако всякий раз, когда я масштабирую приложение, происходит сбой, и я получаю следующую ошибку (см. Ссылку ниже):

errorMessage

Ниже вы можете увидеть мой код.Пожалуйста, дайте мне знать, если какая-либо дополнительная информация должна быть предоставлена.Заранее спасибо.

//App.js
import React, { Component } from "react"
import { compose, withStateHandlers } from "recompose"
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  InfoWindow
} from "react-google-maps"
import Shell from './components/Shell/Shell';
import Features from './components/Features/Features';
import {getFilteredData} from './datamanagement'
import './App.css';


export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      points:  []
    }
  }


  updateMarkers = (zoomLevel) => {
    console.log("HERE: "+zoomLevel)
    this.setState({points:getFilteredData(zoomLevel)})
    console.log(this.state.points)

  }


  render() {
    return (
      <div className="app">
      <Shell />
      <Features
      points={this.state.points}
      updateMarkers={this.updateMarkers.bind(this)}
      />
      </div>
    );
  }
}

---

//Feature.js

import React, { Component } from "react"
import { compose, withStateHandlers } from "recompose"
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  InfoWindow
} from "react-google-maps"
import Map from './Map/Map';
import Mymarker from './Map/Mymarker';
import SidePanel from './Map/SidePanel/SidePanel';
import App from '../../App';
import {getFilteredData} from '../../datamanagement'

const dumbValues = {
  gps_lat: 7,
  gps_lng: 7,
  humidity_pcnt: 7,
  no2_ppm: 7,
  no_ppm: 7,
  noise_dba: 7,
  o3_ppm: 7,
  pm1_ugm3: 7,
  pm2_5_ugm3: 7,
  pm10_ugm3: 7,
  pressure_hpa: 7,
  temperature_c: 7,
  timestamp: "2007-07-07T07:07:07.007Z",
  __v: 7,
  _id: "7"
}

export default class Features extends Component {
  constructor(props) {
    super(props)

    this.map = React.createRef()

    this.state = {
      points: this.props.points,
      panelValues: dumbValues,
      panelBool: false
    }
  }

  handleUpdatePanel = (values) => {
    if(values._id === this.state.panelValues._id){
      this.setState({panelValues:dumbValues})
      this.setState({panelBool:false})
    } else { //klickade på nån annan
      this.setState({panelValues:values})
      this.setState({panelBool:true})
    }
  }

  handlePanelX = () => {
    this.setState({panelValues:dumbValues})
    this.setState({panelBool:false})
  }

  zoomEvent = () => {
    this.updateMarkers(this.map.current.getZoom())
  }

  updateMarkers = (zoomLevel) => {
    console.log("HERE: "+zoomLevel)
    this.props.updateMarkers({points:getFilteredData(zoomLevel)});
    console.log(this.state.points)
  }

render() {
  return (
    <div className="map">
      <main style= {{marginTop: '59px'}}>
        <Map
          reference={this.map}
          markers={this.props.points}
          zoomHandler={this.zoomEvent}
          googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBa8ciqxkSl8ohhsm1HjPcwjOflZE_yWJs&v=3.exp&libraries=geometry,drawing,places"
          loadingElement={<div style={{ height: `100%` }} />}
          containerElement={ <div style={{ justifyContent: 'flex-end'}}/>}
          mapElement={ <div style={{ position: 'absolute', top: 59, right: 0, bottom: 55, left: 0}} /> }
          panelFunc={this.handleUpdatePanel}
          />
      </main>
        {this.state.panelBool && <SidePanel values={this.state.panelValues} panelX={this.handlePanelX}/>}
    </div>
  );
};
}

---

//Map.js

import React from 'react';
import { compose, withStateHandlers } from "recompose"
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
  InfoWindow
} from "react-google-maps"
import Mymarker from './Mymarker';

const Map = compose(withScriptjs, withGoogleMap)
(props => {

  return (
    <GoogleMap defaultZoom={11}
    defaultCenter={{ lat: 57.7088700, lng: 11.974560 }}
    onZoomChanged={props.zoomHandler}
    ref={props.reference}
    >
      {props.markers.map(marker => {

        return (
          <Mymarker
            key={marker._id}
            values = {marker}
            updatePanel = {props.panelFunc}
          />
        )
      })}

    </GoogleMap>
  )
})



export default Map;

---

Это данные, которые возвращаются после присвоения значения точкам и записи в консоли this.state.points:

данные