Доступ к документу с полем карты в firestore

Я хотел бы спросить, как получить доступ к паре значений ключа в поле в firestore через nextjs isReferralAvailable. Ключ TESTER1 и логическое значение true Я хочу отобразить их в таблице или просто записать в консоль пару значений ключа внутри isReferralAvailable

Вот моя функция для получения коллекции ReferralCodes и ее значения.

const [checkReferralStatus, setReferralStatus] = useState([true, false]);
const [referralCodes, setReferralCodes] = useState([]);

const referralCodesDb = (
    collectionName,
    setterName,
    queryOperator,
    valueFieldPrameter
  ) => {
    const q = query(
      collection(db, collectionName),
      where("isReferralAvailable", queryOperator, valueFieldPrameter)
    );
    const unsubscribe = onSnapshot(q, (response) => {
      setterName(
        response.docs.map((data) => {
          return { ...data.data(), id: data.id };
        })
      );
    });
    return unsubscribe;
  };

и я вызываю свою функцию в useEffect

useEffect(() => {
    const unsubscribe = referralCodesDb(
      "ReferralCodes",
      setReferralCodes,
      "in",
      checkReferralStatus
    );
    return () => {
      unsubscribe();
    };
  }, [checkReferralStatus]);

Я также создал displayReferralCodes отдельно от html, чтобы я мог легко вызвать его в div.

const displayReferralCodes = referralCodes
    .slice(pagesVisited, pagesVisited + usersPerPage)
    .map((referralCodes) => {
      // TABLE
      return (
        <tr className = "bg-white border-b dark:bg-gray-800 dark:border-gray-700">
          <td className = "px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            {referralCodes.isReferralAvailable}{" "}
          </td>
        </tr>
      );
    });

Я пытаюсь консольно зарегистрировать referralCodes, но он не регистрирует никаких значений.