I am trying to render data from my firebase realtime database.

The structure of my JSON database is as follows

L1 > L2 > L3 > 
Item 1 > All results
Item 2 > All Results
Item 3 > All Results
Item 4 > All Results

There are also multiple L3s, which lead into 4 seperate line items as pictured above.

However, no data is rendering on the page where I am loading this info. There is nothing wrong in the way I am rendering this page, as i was able to load a basic H1 tag prior.

However, using the following code renders a blank screen all together.

Where have I gone wrong?

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"}}> item1 </th>
                          <th style={{textAlign: "center"}}> item2 </th>
                          <th style={{textAlign: "center"}}> item3 </th>
                          <th style={{textAlign: "center"}}> item4 </th>
                      </tr>
                  </thead>
                  <tbody>
                      {Object.keys(data).map((id, index) => {
                          return (
                              <tr key={id}>
                              <th scope="row">{index +1}</th>
                              <td>{data[id].item1}</td>
                              <td>{data[id].item2}</td>
                              <td>{data[id].item3}</td>
                              <td>{data[id].item4}</td>
                              </tr>
                          )
                      } )}
                  </tbody>
              </table>          
      </div>
  );
};

export default Data