Реагируйте на родные карты. Маркер не будет отображаться

Question

Я могу извлечь все данные о маркерах обратно из Firebase и сохранить их в array.

Но у меня возникают проблемы при рендеринге, это не дает мне никакой ошибки, но маркеры не появятся.

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

Вот что я получил от firebase

Object {
  "address": "",
  "coordinate": Object {
    "latitude": 30.448975180780916,
    "longitude": -91.06502489274193,
  },
  "description": "lol",
  "image": "somelink",
  "timestamp": 1585608644837,
  "uid": "06qPxLgyzkeTXExqycsGbJnhuNi2",
} 

---

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import MapView, { Marker } from "react-native-maps";
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";

import * as firebase from "firebase";

class HomeScreen extends Component {
  constructor(props) {
  super(props);
    this.state = {
      region: null,
      markers: []
    };
    this._getLocationAsync();
  }
  componentDidMount() {
    const firestore = firebase.firestore();
    firestore
      .collection("post")
      .get()
      .then(snapshot => {
        snapshot.docs.forEach(doc => {
          this.state.markers = doc.data();
        });
      });
  }
  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== "granted") console.log("Permission denied");

    let location = await Location.getCurrentPositionAsync({
      enabledHighAccuracy: true
    });
    let region = {
      latitude: location.coords.latitude,
      longitude: location.coords.longitude,
      latitudeDelta: 0.045,
      longitudeDelta: 0.045
    };
    this.setState({ region: region });
  };

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={{ flex: 1 }}
          region={this.state.region}
          showsUserLocation={true}
        >
      {/* <MapView.Marker
        coordinate={{
          latitude: 30.5044,
          longitude: -90.4612
        }}
        title={"Road damaged"}
        description={"description"}
      /> */}

          {this.state.markers.map((marker, index) => {
            return (
              <MapView.Marker
                key={index}
                coordinate={{
                  latitude: marker.coordinate.latitude,
                  longitude: marker.coordinate.longitude
                }}
                title={"Road damaged"}
                description={"description"}
              ></MapView.Marker>
            );
          })}
        </MapView>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1

  }
});

export default HomeScreen;