I need to put the fetched data in a Table (it's a very simple CRUD)

I've tested putting the map() function outside of the Management() function but it doesn't work.

Here is my code :

let allUsers = [];

function Management() {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const querySnapshot = await getDocs(collection(db, "users"));
        let allDocs = [];
        querySnapshot.forEach((doc) => {
          allDocs.push({ ...doc.data(), id: doc.id });
        });
        for (const item of allDocs) {
          const querySnap = await getDocs(
            collection(db, `users/${item.id}/general`)
          );
          allUsers.push(
            querySnap._snapshot.docChanges[0].doc.data.value.mapValue.fields
              .data.mapValue.fields
          );
        }
      } catch (err) {
        console.log(err);
      }
    };
    fetchData();
  }, []);

  return (
    <Table>
      <thead>
        <tr>
          <th>#</th>
          <th>Nom</th>
          <th>Prénom</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        {allUsers.map((user) => {
          return (
            <tr>
              <th scope="row">1</th>
              <td>{user.email.stringValue}</td>
              <td>a</td>
              <td>@mdo</td>
            </tr>
          );
        })}
      </tbody>
    </Table>
  );
}

export default Management;

The problem occurs on the allUsers.map() function.

It seems that it returns an empty array