I can't access the data stored in my sessionDates array in my DateList function

this is the code from my index.js including the api call

import React from "react";
import ReactDOM from "react-dom";
const availableDates = [];
const available = [];
const sessionDates = [];

function getDates(e){
  getDate(apiUrl);
}

const getDate = async (apiUrl)=>{
  const res = await fetch(apiUrl)
  try {
    const data = await res.json();
    availableDates.push(data);
    availableDates.map((datee) => {
      datee.map((session) => {
        sessionDates.push(session.date.slice(0, 10));
      });
    });
    return sessionDates;
  }  catch(error) {
    console.log("error", error);
  }
}
window.addEventListener('load', getDates);

function DateList(){
  return <section>{sessionDates[0]}</section>;
}