How to display custom task array elements (React Calendar)

I have managed to solve this and the solution was:
the method that build my events array was async and due to that fact, to update the events field in state I had to perform setState in .then function.

// This method gets the data from DB and maps it onto fields readable by Calendar component
const requestArrayBuilder = async () => {

// API call using AXIOS
    let data = await EventsService.getAllEvents()

// Map raw data onto appropriate schema
    return data.map(val => ({
        id: val.id,
        text: val.type,
        start: val.startDate + "T00:00:00",
        end: val.endDate + "T00:00:00"
    }))
}


componentDidMount() {

// Call the data provider function to receive a promise
        requestArrayBuilder()

// Resolve the promise by setting the events field in state equal to the data array
            .then(d => {
            this.setState({
                startDate: DayPilot.Date.today(),
                events: d
            })
        })
    }

Hope this will help someone someday save some time. This may not be the best solution as I am still learning both React and JS, please, feel free to comment with any suggestions.

There are two options:

1. You can use the direct API and load events using the update() method. This approach is used in the React Weekly Calendar tutorial:
https://code.daypilot.org/42221/react-weekly-calendar-tutorial

componentDidMount() {

  // load event data
  this.calendar.update({
    events: [
      {
        id: 1,
        text: "Event 1",
        start: "2023-03-07T10:30:00",
        end: "2023-03-07T13:00:00"
      },
     // ...
    ]
  });
}

2. Another option is to use state. In this case the Calendar component will be updated automatically.

componentDidMount() {

  // load event data
  this.setState({
    events: [
      {
        id: 1,
        text: "Event 1",
        start: "2022-11-08",
        end: "2022-11-09"
      },
      // ...
    ]
  });

}
render() {
  return (
    <div>
      <DayPilotMonth
        {...this.state}
      />
    </div>
  );
}

You can find an example in the React Monthly Calendar tutorial:
https://code.daypilot.org/26289/react-monthly-calendar-tutorial

You can choose either method but you shouldn't mix them. If you store events in the state and then load them using the direct API the changes will be overwritten when a state change is detected and applied.

Your solution is fine - if you use an async function to load the data you need to use either then() or await.

Thank you very much for your thorough answer, now as I look at this problem it seems so trivial, yet I have spent over 10 hours trying to overcome it. Best regards!