React native with firebase how can I retrive all the data from spcific collection

See more:

react-native

but the list is empty i tried to replace the flatlist with

<View>
       {books.map((bb) => {
         return (
           <View>
             <Text>name: {bb.ISBN}</Text>
           </View>
         );
       })}
     </View>

but i recived a notif that each child should have a key so how can i display all data

What I have tried:

<pre>
import { View, Text, StyleSheet, Button, FlatList } from "react-native";
import { useState, useEffect } from "react";
import {
  collection,
  query,
  orderBy,
  onSnapshot,
  setDoc,
  doc,
  getDoc,
  getDocs,
} from "firebase/firestore";
import { db } from "../../config/firebase";
//import { FlatList } from "react-native-gesture-handler";

export default function Discovry({ navigation }) {
  
  const [books, setBooks] = useState([]);
  const booksCol = collection(db, "Book");

  useEffect(() => {
    const q = query(booksCol); //which tabel
    onSnapshot(q, (querySnapshot) => {
      setBooks(
        querySnapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      );
    });
  }, []);

  return (
    <View>
      <FlatList
        keyExtractor={(item) => item.id}
        data={books}
        renderItem={({ item }) => <Text>{item.ISBN}</Text>} //here i want my data
      />
     
    </View>
  );
}