如何显示firestore中的数组isReferralAvailable的值。

这里是我的代码，我只是在如何获取ReferralCodes集合下每个文档的isReferralAvailable值上遇到了麻烦

const [referralCodes, setReferralCodes] = useState([]);
const [usedReferralCodes, setUsedReferralCodes] = useState([]);

useEffect(() => {
    onSnapshot(collection(db, "ReferralCodes"), (docsSnap) => {
      setReferralCodes(
        docsSnap.docs.map((doc) => ({
          ...doc.data()["isReferralAvailable"],
          id: doc.id,
        }))
      );
      setUsedReferralCodes(
        docsSnap.docs.map((doc) => ({
          ...doc.data()["isReferralUsed"],
          id: doc.id,
        }))
      );
    });
  }, []);

这是我的表行和MapreferralCodes和usedReferralCodes，但我有麻烦，因为键是索引，我不知道如何显示它们。

<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                    {/* mapping the available codes */}
                    {referralCodes.map((codes) => {
                      return (
                        <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                          {codes[1]}{" "}
                        </td>
                      );
                    })}
    
                    {/* mapping the used codes */}
                    {usedReferralCodes.map((usedCodes) => {
                      return (
                        <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                          {usedCodes[1]}{" "}
                        </td>
                      );
                    })}
                    {usedReferralCodes.map((usedCodes) => {
                      return (
                        <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                          {usedCodes[1]}{" "}
                        </td>
                      );
                    })}
                  </tr>

这只显示每个文档的index 1的结果，有一个isReferralAvailable我想在表行中显示isReferralAvailable的数组字段下的所有内容。我将感谢任何帮助。