Estoy tratando de leer los datos de la base de datos en una tabla, pero obtengo una tabla vacía de mi salida, aunque estoy convencido de que estoy haciendo lo correcto. A continuación se muestra Mi código en useEffect Hook y cómo estoy llamando a los datos en el elemento jsx de datos de tabla.

Interviniendo por tu Ayuda

Mi uso useEffect Code

 useEffect(() => { const readCustomersData= async() =>{ const data = await getDocs(customersCollectionRef); setCustomers(data.docs.map((doc) => ({ ...doc.data(), id:doc.id}))); } readCustomersData(); },[])

Cómo estoy llamando al código en The jsx Elememnt

 { customers.map(( value, index) => { return( <tr key={index.id}> <th scope="row">{index+1}</th> <td>{value.cname}</td> <td>{value.contact}</td> <td>{}</td> <th>{}</th> <td>{}</td> <td>{}</td> <td>{}</td> <td>{}</td> <td className='p-2 d-flex justify-content-space-between'> <Button variant='success'>Update</Button> <Button variant='danger'>Delete</Button> </td> </tr> ) })} </tbody>