In my react functional component I am returning a list of notifications. When the useEffect() is called the "data" is generated and then shown on page. The code runs fine but the map() function does not show desired effect, no list is seen... I get results on console but the object called "data" I am generating just doesnt works properly with map() or may be some other issue is there which i can not see.. My code is :

import React from 'react'
import { useEffect } from 'react';
import { useState } from 'react'

export default function Notifications() {

  var data = [];
  var categoryNames = [];
  var budgetsArray = [];
  var datesArray = [];

  const sessionInfo = JSON.parse(window.localStorage.getItem("session"));

  useEffect(
    () => {
      handleShowNotification();
    }
  )

  async function getAllNotifications() {
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Cookie", "connect.sid=s:80dace41-48b4-47d8-a444-f8febddbfd90.1vgh6QFP/tUfsEdt+/91KgBJjKFVnMm6vghCiOGLmP8");

    var raw = JSON.stringify({
      "session_id": sessionInfo._id,
    });

    var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    };

    var response = await fetch("http://localhost:8080/myNotifications", requestOptions);
    var result = await response.json()
    console.log("all notifications are "   result.data.notifications);
    return result.data.notifications;
  }

  async function getCategoryName(category_id) {
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Cookie", "connect.sid=s:db8f2f2e-3680-4dd7-8b7d-cb022010cc7a.4AKLofa96yxCRAhjQJdkKKyaeOJpc0g/qQxJ9klQpmk");

    var raw = JSON.stringify({
      "session_id": sessionInfo._id,
      "category_id": category_id
    });

    var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    };

    var response = await fetch("http://localhost:8080/fetchCategory", requestOptions);
    var result = await response.json();
    return result.data.category.category_name;
  }

  async function getBudget(categoryId) {
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Cookie", "connect.sid=s:80dace41-48b4-47d8-a444-f8febddbfd90.1vgh6QFP/tUfsEdt+/91KgBJjKFVnMm6vghCiOGLmP8");

    var raw = JSON.stringify({
      "session_id": sessionInfo._id,
      "category_id": categoryId
    });

    var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    };

    var response = await fetch("http://localhost:8080/getBudget", requestOptions)
    var result = await response.json();
    return result.data.budget.amount;
  }



 async function handleShowNotification() {
    var notifications = await getAllNotifications();
    var count = 0;
    for (var notification of notifications) {
      count  ;
      var categoryName = await getCategoryName(notification.category_id);
      console.log("category name " categoryName);
      categoryNames.push(categoryName);
      var budgetAmount = await getBudget(notification.category_id);
      console.log("budget amount " budgetAmount);
      budgetsArray.push(budgetAmount);
      var date = notification.date_of_creation;
      console.log("date " date);
      datesArray.push(date);
    }
    for (var i=0; i<count; i  ) {
        data.push({
          categoryName:categoryNames[i],
          budgetAmount:budgetsArray[i],
          date:datesArray[i],
        });
    }
    console.log("length of data is " data.length)
  }

  function getFullData(item) {
    return (<li>The catgeory name is {item.categoryName}and budget is{item.budgetAmount}</li>);
  }

  return (
    <div>
      <br />
      <br />
      <div className="row">
        {/*<button onClick={handleShowNotification} style={{ width: "50%" }}>Show notifications</button>*/}
        <ul>
         //Problem is here, this is not shown
        {data.map(getFullData)}
        </ul>
      </div>
    </div>
  )
}

The code-sandbox link reflecting the problem is here....