How can I load in firestore documents into a flatlist?

import {  StyleSheet,  Alert,  SectionList,  SafeAreaView,  Image,  FlatList,  TextInput,  ActivityIndicator,} from "react-native";import React, {  useState,  useEffect} from "react";import EditScreenInfo from "../components/EditScreenInfo";import {  Text,  View} from "../components/Themed";import {  StatusBar} from "expo-status-bar";import {  List} from "react-native-paper";import {  initializeApp} from "firebase/app";import {  getFirestore,  collection,  getDoc,  addDoc,  doc,  setDoc,} from "firebase/firestore";const firebaseConfig = { ...};export default function TabTwoScreen() {  const [loading, setLoading] = useState(true); //Set loading to true on component mount  const [users, setUsers] = useState([]); //initial empty array of users  // Initialize Firebase  const db = getFirestore(app);  const firestore = getFirestore();  const app = initializeApp(firebaseConfig);  //this hook triggers when components mount, then subscribe to collection  useEffect(() => {    const subscriber = firestore()      .collection(db, "Users")      .onSnapshot((querySnapshot) => {        const users = [];        querySnapshot.forEach((documentSnapshot) => {          users.push({            ...documentSnapshot.data(),            key: documentSnapshot.id,          });        });        setUsers(users);        setLoading(false);      });    // Unsubscribe from events when no longer in use    return () => subscriber();  }, []);  if (loading) {    return <ActivityIndicator / > ;  }  return (<FlatList   data={users}   renderItem={({ item }) => (<View><Text>User ID: {item.id}</Text><Text>User Name: {item.name}</Text></View>  )}/>  );}