Display the data if the user has permissions to read the data in React(Firebase)

I need to write a program that will display specific data if the user has permission to view those documents. Below is the code, the user has permissions, but I still can't see the data. Thank you for your help! I need to read data from the collection named my_collection, and to display it if user has permissions. Rules are:

import { useEffect, useState } from 'react';
import { getFirestore, collection, query, where, getDocs } from 'firebase/firestore';
import { auth } from '../firebase';
 
const Home = () => {
  const [data, setData] = useState([]);
 
  const checkUserPermissions = async (userId) => {
    const db = getFirestore();
    const userPermissionsQuery = query(
      collection(db, 'my_collection'),
      where('user.id', '==', userId)
    );
 
    const userPermissionsSnapshot = await getDocs(userPermissionsQuery);

    if (!userPermissionsSnapshot.empty) {
      const nikolaPozoristeQuery = query(collection(db, 'my_collection'));
      const nikolaPozoristeSnapshot = await getDocs(nikolaPozoristeQuery);
      const items = nikolaPozoristeSnapshot.docs.map((doc) => doc.data());
      setData(items);
    } else {
      setData([]); // If the user doesn't have permission, set data to an empty array
    }
  };
 
  useEffect(() => {
    const user = auth.currentUser;
    if (user) {
      const userId = user.uid; // Use the user's ID
      checkUserPermissions(userId);
    }
  }, []);
 
  const renderTableRows = () => {
    return data.map((item, index) => (
      <tr key={index}>
        <td>{item.code}</td>
        <td>{item.date}</td>
        <td>{item.event}</td>
        <td>{item.readtime}</td>
        <td>{item.tel}</td>
  
      </tr>
    ));
  };
 
  return (
    <div>
      <h2>Welcome</h2>
      {data.length > 0 ? (
        <table>
          <thead>
            <tr>
              <th>Code</th>
              <th>Date</th>
              <th>Event</th>
              <th>Read Time</th>
              <th>Tel</th>

            </tr>
          </thead>
          <tbody>{renderTableRows()}</tbody>
        </table>
      ) : (
        <p>No data available</p>
      )}
    </div>
  );
      }
 
export default Home;

Via Active questions tagged javascript - Stack Overflow https://ift.tt/SH8OUAr