如何从firestore渲染用户列表，并使用react js将其以表格形式显示在网页上？

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import firebase from 'firebase/app';
import 'firebase/firestore';

// 步骤1：连接到你的Firebase项目
const firebaseConfig = {
  // 配置你的Firebase项目信息
};

firebase.initializeApp(firebaseConfig);
const firestore = firebase.firestore();

// 步骤2：定义一个React组件
const UserList = () => {
  // 步骤4：将用户列表数据存储在组件的状态中
  const [users, setUsers] = useState([]);

  // 步骤3：从Firestore中获取用户列表数据
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const querySnapshot = await firestore.collection('users').get();
        const userData = querySnapshot.docs.map((doc) => doc.data());
        setUsers(userData);
      } catch (error) {
        console.error('Error fetching users: ', error);
      }
    };

    fetchUsers();
  }, []);

  // 步骤5：使用表格组件来显示用户列表数据
  return (
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>邮箱</th>
        </tr>
      </thead>
      <tbody>
        {users.map((user) => (
          <tr key={user.id}>
            <td>{user.name}</td>
            <td>{user.age}</td>
            <td>{user.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

// 步骤6：将组件渲染到网页上
ReactDOM.render(<UserList />, document.getElementById('root'));