Реагируйте: API Google Map не использует переданные значения Lon и Lat для отображения карты

Question

Я передаю свои реквизиты из родительского компонента в мой дочерний компонент. В реквизитах наряду с кучей других вещей указаны мои долгота и широта, которые должен отображать мой компонент Google Maps. Теперь, когда я пытаюсь выполнить рендеринг, моя консоль говорит об этом как для setPostion, так и для setCenter:

InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number

Я проверил и убедился, что мои числа на самом деле были числами, даже дошел до ParseFloat (), прежде чем они были отрисованы, и теперь я просто получаю пустой холст.

Пожалуйста, помогите. Первый прикрепленный код - это мой GoogleMapComponent, который вызывается всякий раз, когда передаются символы lat и long:

import React, { Component } from "react";

class Map extends Component {
  componentDidMount() {
    const google = window.google;
    let gMap = new google.maps.Map(this.refs.map, {
      zoom: 12,
      center: {
        lat: this.props.lat,
        lng: this.props.lon
      }
    });
    new google.maps.Marker({
      position: {
        lat: this.props.lat,
        lng: this.props.lon
      },
      map: gMap,
      title: "Hello World!"
    });
  }
  render() {
    return <div className="mapped" ref="map" />;
  }
}

export default Map;

и вот мой код, который я передаю компоненту карты и должен отрисовывать широту и долготу. Просматривая код, помните, что мой лат и лон проходили через

import React, { Component } from "react";
import Map from "./mapcomponent";

class SingleEvent extends Component {
  render() {
    let {
      situation,
      time,
      day,
      date,
      address0,
      address1,
      address2,
      venue,
      Lon,
      Lat
    } = this.props.activeEvent;
    return (
      <div className="single-event">
        <div className="calendar-container">
          <h4>{day}</h4>
          <h4>{date}</h4>
          <h4> {time} </h4>
        </div>
        <div className="details">
          <div className="ceremony-container">
            <h1>{situation}</h1>
            <h2>{address0}</h2>
            <h3>{address1}</h3>
            <h3>{address2}</h3>
          </div>
          <div className="images">
            <img src={venue} alt="something" />
            <Map ref="mapped" lon={Lon} lat={Lat} />
          </div>
        </div>
      </div>
    );
  }
}

export default SingleEvent;