I am trying to read Database Data into a Table but I am getting an empty table from my Output though I am convinced I am doing the right thing. Below is My code in the useEffect Hook and how I am Calling the data in the Table data jsx element.

Intervening for your Help

My Use useEffect Code

useEffect(() => {

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

    }

    readCustomersData();
},[])

How I am Calling The code in 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>