Calendar "day" mode doesn't work in simulator

[AdityaAA2004]

I am trying to implement the Calendar in "day" mode with the following data as events: [ {"color": "#EFE3FF", "end": 2024-07-20T12:57:50.000Z, "id": "6697b1dadb73fba7bd9a37a5", "start": 2024-07-20T11:57:50.000Z, "title": "Investor meet" } ]

But this is what I get:

React Native: 0.73.6.

I am using an iPhone XR simulator with IOS 17.5

[AdityaAA2004]

I changed the events to this:

[
    {
    "end": 2024-07-20T12:57:50.000Z, 
    "start": 2024-07-20T11:57:50.000Z, 
    "title": "Investor meet"
    }
]

Also, this is the way I use the component.

import {Calendar} from "react-native-big-calendar";

<Calendar events={taskListReformatted} height={650}
                      date={startDate}
                      activeDate={startDate}
renderEvent={(event,touchableOpacityProps)=>(
                              <TouchableOpacity {...touchableOpacityProps}>
                                  <Text style={{fontSize:18,color:"#60009A"}}>{event.title}</Text>
                              </TouchableOpacity>
                          )}
                      mode={"day"} />

Still this doesn't work.

I have done a little more debugging and found this as the "_a" argument in the _CalendarEvent() function:

All parameters: 
{
"ampm": true, 
"event": 
    {
    "end": 2024-07-20T12:57:50.000Z, 
    "id": 0, 
    "overlapCount": 1, 
    "overlapPosition": 0, 
    "start": 2024-07-20T11:57:50.000Z, 
    "title": "Investor meet"
    }, 
"eventCellStyle": undefined, "eventCellTextColor": "", 
"eventCount": 1, 
"eventOrder": 0, "hours": 24, 
"maxHour": 23, "minHour": 0, 
"onPressEvent": undefined, "overlapOffset": undefined, "renderEvent": [Function renderEvent], 
"showTime": true
}

[AdityaAA2004]

I have solved this myself.