Nuevo en trabajar con firebase.

El formato de mi base de datos es el siguiente

 L1 --L2 ---L3 ----L4 ------- Result 1 ------- Result 2 ------- Result 3 ------- Result 4 ----L4 ------- Result 1 ------- Result 2 ------- Result 3 ------- Result 4

Estoy tratando simplemente de representar los datos en mi interfaz a través de React, pero no se representa nada cuando se llama al componente de la tabla de datos. De hecho, toda la aplicación no se renderiza, simplemente una pantalla blanca.

A continuación se muestra el componente de la tabla de datos, que estoy tratando de representar.

¿Dónde me equivoco al intentar representar los datos?

 const Data = () => { const [data, setData] = useState ({}); useEffect (() => { Database.child("L1").on("value", (snapshot) => { if (snapshot.val() !== null) { setData({ ...snapshot.val() }); } else { setData({}); } }); return () => { setData ({}); }; }, []); return ( <div style={{marginTop: "100px"}}> <table className="styled-table"> <thead> <tr> <th style={{textAlign: "center"}}> L4 </th> <th style={{textAlign: "center"}}> L4 </th> </tr> </thead> <tbody> {Object.keys(data).map((id, index) => { return ( <tr key={id}> <th scope="row">{index +1}</th> <td>{data[id].result_1}</td> <td>{data[id].result_2}</td> <td>{data[id].result_3}</td> <td>{data[id].result_4}</td> </tr> ) } )} </tbody> </table> </div> ); }; export default Data