Firestore Collection doesn't Render Flatlist

I retrieve a collection from Firestore successfully, and successfully I put it in an array, but it doesn't display on the screen, issue is I would say where I wrote parameter post inside my renderPost function.

This is my code:

<!-- language-all: lang-js -->
import Fire, { getPosts } from "../Fire";
import firebase, { database } from "firebase";
require("firebase/firestore");

export default class HomeScreen extends React.PureComponent {
  
  constructor(props) {
    super(props);

  }
  state = {
    loading: false,
    limit: 2,
    post: [],
    user: {},
  };

  onPostsReceived = (post) => {
    this.setState({ post: post });
    console.log(this.state.post);   //it DOES return an array full of objects of collection
  };

  componentDidMount() {
    getPosts(this.onPostsReceived);
    //console.log(this.state.post);   //returns empty array
  }


  renderPost = (post) => {
    return (
      <View style={styles.feedItem}>
        <Image
          source={
            this.state.user.avatar
              ? { uri: this.state.user.avatar }
              : require("../assets/tempAvatar.jpg")
          }
          style={styles.avatar}
        />
        <View style={{ flex: 1 }}>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <View>
              {/* <Text>{console.log(this.state.post)}</Text> */}
              <Text style={styles.name}>{}</Text>
              <Text style={styles.timestamp}>
                {moment(post.timestamp).toDate().toDateString()}
              </Text>
            </View>

            <Ionicons name="ios-more" size={24} color="#73788B" />
          </View>
          <Text style={styles.post}>{post.text}</Text>
          <Image
            source={post.image && { uri: post.image }}
            style={styles.postImage}
            resizeMode="cover"
          />
          <View style={{ flexDirection: "row" }}>
            <Ionicons
              name="ios-heart-empty"
              size={24}
              color="#73788B"
              style={{ marginRight: 16 }}
            />
            <Ionicons name="ios-chatboxes" size={24} color="#73788B" />
          </View>
        </View>
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          translucent
          backgroundColor="white"
          barStyle="dark-content"
        />
        <ClassicHeader
          headerTitle="Eleph"
          leftComponent={
            <TouchableOpacity
              style={{ marginRight: 0, margin: 10 }}
              onPress={() =>
                this.props.navigation.dispatch(DrawerActions.openDrawer())
              }
            >
              <FontAwesome5 name="bars" size={24} color="#161924" />
            </TouchableOpacity>
          }
          rightComponent={
            <TouchableOpacity
              style={{ marginLeft: 0, margin: 10 }}
              onPress={() => this.props.navigation.navigate("Message")}
            >
              <Ionicons name="ios-chatboxes" size={24} color="#73788B" />
            </TouchableOpacity>
          }
        />
        <FlatList
          style={styles.feed}
          data={this.state.post}
          //extraData={this.state}
          renderItem={({ item, index }) => {
            this.renderPost(item);
          }}
          keyExtractor={(item, index) => String(index)}
          //ItemSeparatorComponent={this.renderSeparator}
          ListFooterComponent={this.renderFooter}
          ListHeaderComponent={this.renderHeader}
          onEndReachedThreshold={0}
          onEndReached={this.retrieveMore}
          showsVerticalScrollIndicator={false}
        ></FlatList>
      </View>
    );
  }
} 

getPosts from Fire:

export async function getPosts  (PostsRetreived)  {
    var post = [];
  
    var snapshot = await firebase.firestore()
      .collection('posts')
      .orderBy('timestamp')
      .get()
  
    snapshot.forEach((doc) => {
      const PostItem = doc.data();
      PostItem.id = doc.id;
      post.push(PostItem);
    });
    PostsRetreived(post);
}

Fire.shared = new Fire();
export default Fire;

The error was this:

renderItem={({ item, index }) => {
            this.renderPost(item);
          }}

should be renderItem={({ item, index }) => 
            this.renderPost(item);
          }

I just had to delete one curly bracket.