Accessing a Document that have a Field of Map in firestore

I would like to ask on how to access the key value pair in field in firestore via nextjs isReferralAvailable.
The key TESTER1and a boolean value of true I want to display them in a table or just console log the key value pair inside isReferralAvailable

Here is my function to get the ReferralCodes collection and its value.

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;
  };

and I am calling my function in a useEffect

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

I also created a displayReferralCodes separately from the html so I could easily just call it in a 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>
      );
    });

I am trying to console log the referralCodes however it does not log any values.

To access fields of Map in a document you can directly use . operator.

In your code :

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) => {
          console.log(data.data().isReferralAvailable.TESTER1); // ⇐ Accessing Fields of Map
          return { ...data.data(), id: data.id };
        })
      );
    });
    return unsubscribe;
  };

As Maps are just an JSON looking object hence you can access their fields just like how we access fields of an Object.