如何使用React JS遍历MongoDB数组来呈现一个表？

import React, { useEffect, useState } from 'react';
import { MongoClient } from 'mongodb';

const TableComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const client = new MongoClient('<mongodb连接字符串>');
      await client.connect();
      const db = client.db('<数据库名称>');
      const collection = db.collection('<集合名称>');
      const result = await collection.find().toArray();
      setData(result);
      client.close();
    };

    fetchData();
  }, []);

  return (
    <table>
      <thead>
        <tr>
          <th>属性1</th>
          <th>属性2</th>
          {/* 添加更多表头 */}
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr key={item._id}>
            <td>{item.property1}</td>
            <td>{item.property2}</td>
            {/* 添加更多表格单元格 */}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default TableComponent;