如何在reactjs中显示从firestore获取的数据到boostrap表？我可以获取，但不能用标准的方式显示

import React, { useEffect, useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'bootstrap/dist/css/bootstrap.min.css';

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

  useEffect(() => {
    const fetchData = async () => {
      const db = firebase.firestore();
      const snapshot = await db.collection('your_collection').get();
      const fetchedData = snapshot.docs.map(doc => doc.data());
      setData(fetchedData);
    };

    fetchData();
  }, []);

  return (
    <div>
      {/* Bootstrap table code */}
    </div>
  );
};

return (
  <div>
    <table className="table">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          {/* Add more table headers if needed */}
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item.column1}</td>
            <td>{item.column2}</td>
            {/* Add more table cells if needed */}
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

import React from 'react';
import FirestoreTable from './FirestoreTable';

const App = () => {
  return (
    <div>
      <h1>Firestore Data</h1>
      <FirestoreTable />
    </div>
  );
};

export default App;