React native calendars agenda not showing items with same date

I'm currently using React Native Calendars library to build an agenda-like app on React Native, to get the data I need, I use Firebase Firestore library.

This library's agenda uses a few properties in order to show appointment cards:

My agenda settings

<Agenda            items={agenda.items}            // Initially selected day            selected={date}            // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined            minDate={today}            // Specify how each item should be rendered in agenda            renderItem={(item, firstItemInDay) => {                return <View><PlanningCard                    style={styles.appointmentCard}                    hour={String(moment.unix(item.date).format("H[h]mm"))}></PlanningCard></View>;            }}            />

This is the data I get from my function -> props

This is the function I call, it's a huge mess since I'm trying to figure out a way of getting every single info I need to show on both the calendar and agenda.

export const retrievePlanning = async (uid:string) => {    let getAppointments:any;    let appointments:any = {};    let markedDates:any = {};    let agendaItems:any = {};    let user:any;    let docDate:string;    let today:string = String(moment().format("YYYY-MM-DD"));    try{        getAppointments = await firestore()                                .collection('appointments')                                .where('marchand_id', '==', uid)                                .get(); // Recup        getAppointments.forEach(async(doc:any) => { // Loop on appointments            appointments[doc.id] = doc.data(); // Storing appointments            docDate = moment.unix(doc.data().date).format("YYYY-MM-DD"); // Unix timestamp to agenda's date format            markedDates[docDate] = {marked: true, dotColor: 'deepskyblue'} // Storing appointment dates (for calendar markers)            try {                user = await firestore()                            .collection('users')                            .doc(String(doc.data().customer_id))                            .get(); // User who the appointment belongs to                console.log("test, does this work??")                // HERE IS THE ISSUE !!!                agendaItems[docDate] = [doc.data(), user.data()] // Storing appointment dates (to show them as agenda items)            } catch (error:any) {                console.log(error);                Alert.alert("Error", String(error.message));            }        });        //console.log(agendaItems)        //console.log(calendarDates)        //console.log(planning);        return {planning: appointments, dates: markedDates, items: agendaItems}    } catch (error:any) {        console.log(error);        Alert.alert("Error", String(error.message));    }}

The issue occurs inside the appointments loop, where I want to get multiple appointments that have the same date but different hours.

I need to create an object that stores 3 types of information:

• formatted appointment dates (for calendar markers)
• full data from every single appointment (to pass as props to the next screen)
• formatted appointment dates + appointments data + user data (to show the agenda cards)

The problem is that I can't append multiple same index values (the index are the dates), for example, let's say I have 2 appointments the same day, it should look like this:

{ "2022-01-24": [{appointment 1 data}],"2022-01-24": [{appointment 2 data}],"2022-01-28": [{some other appointment data}],}

But instead it looks like this:

{ "2022-01-24": [{appointment 2 data}],"2022-01-28": [{some other appointment data}],}

Which means that I can only show 1 appointment per day.Is there any way to make that example above possible?Or is there anything I can do, a workaround for this maybe?

PS: I'm not a native English speaker so don't kill me because of my grammar please. And also I'm junior so this code is a HUGE mess.