Попытка передать значения геолокации дочернему компоненту в React с помощью google-maps-реагировать

Question

Я немного поработал над этим: я получил свою Карту для рендеринга в родительский компонент с помощью google-maps-реагировать, HoC и перекомпоновать, но я не могу передать значения геолокации от родителя к потомку. Пожалуйста, смотрите ниже (я довольно новичок в React... так что, пожалуйста, будьте осторожны):

родитель

class MapContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      latCords: '',
      longCords: ''
    };
  }
  componentDidMount() {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition(position => {
        this.setState({
          latCords: position.coords.latitude,
          longCords: position.coords.longitude
        });
        //return position.coords.latitude, position.coords.longitude;
      });
    } else {
      /* geolocation IS NOT available */
      alert(
        "We're sorry! Geolocation is not available for some reason..."
      );
    }
  }

  render() {
    const userCORDS = [this.state.latCords, this.state.longCords];
    return <MyMapComponent userCords = {
      userCORDS
    }
    />;
  }
}
export default MapContainer;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Ребенок, используя пакет google-maps-реакции

import {
  compose,
  withProps
} from 'recompose';
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker
} from 'react-google-maps';

const MyMapComponent = compose(
  withProps({
    googleMapURL: 'https://maps.googleapis.com/maps/api/js?key=***',
    //'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places',
    loadingElement: < div style = {
      {
        height: `100%`
      }
    }
    />,
    containerElement: < div style = {
      {
        height: `400px`
      }
    }
    />,
    mapElement: < div style = {
      {
        height: `100%`
      }
    }
    />
  }),
  withScriptjs,
  withGoogleMap
)(props => ( <
  GoogleMap defaultZoom = {
    12
  }
  defaultCenter = {
    {
      lat: '',
      lng: ''
    }
  } > {
    props.isMarkerShown && ( <
      Marker position = {
        {
          lat: '',
          lng: ''
        }
      }
      onClick = {
        props.onMarkerClick
      }
      />
    )
  } <
  /GoogleMap>
));

class MyFancyComponent extends React.PureComponent {
  state = {
    isMarkerShown: false
  };

  componentDidMount() {
    this.delayedShowMarker();
  }

  delayedShowMarker = () => {
    setTimeout(() => {
      this.setState({
        isMarkerShown: true
      });
    }, 3000);
  };

  handleMarkerClick = () => {
    this.setState({
      isMarkerShown: false
    });
    this.delayedShowMarker();
  };

  render() {
    console.log(props.userCords[0]);
    return ( <
      MyMapComponent isMarkerShown = {
        this.state.isMarkerShown
      }
      onMarkerClick = {
        this.handleMarkerClick
      }
      />
    );
  }
}
export default MyMapComponent;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>