Странный порядок выполнения кода в react/javascript

помогите пожалуйста разобраться в этой магии. Есть асинхронная функция, которая в два этапа формирует данные и передаёт их для вывода на экран. Не могу понять, как получается, что на экран выводится сначала результат первого этапа, а через какое-то время результат второго этапа.

Состояние, где хранится значения о записях:

const [tickets, setTickets] = useState([]);

Функция, которая формирует записи:

useEffect(() => {
async function ticketsInit() {

  //(1) получаем массив значний времени для записи 
  //из синхронной функции [10:30, 10:34, 10:38, ...]
  const intervalsArr = getIntervalsArr() 

  //(2) получаем значения времени из БД,
  //на которые запись уже осуществлена 
  //в конкретный день
  const bookedArr = await getBookedTickets (activeDay) 

  let tickets = []

  //(3) перегоняем массив значений времени в объекты в tickets,
  //где помимо самого времени хранится дата и количество записей
  await intervalsArr.map(ticket => { 
    tickets.push({date:activeDay, time:ticket, bookingCount:0})
  })

  //(4) проходим по записям из БД и вносим в tickets значения
  //о количестве записей на каждый ticket
  await bookedArr.map(booked => { 
                                 
    for (let i = 0; i < intervalsArr.length; i++) {
      if (booked.time === intervalsArr[i]) {
        tickets[i].bookingCount++
      }
    }
  })

  setTickets(tickets) //(5) передаём объекты tickets в состояние, чтобы они вывелись на экране
}

ticketsInit()
},[activeDay])

Вывод на экран:

  {tickets.map(ticket =>
      <button key={ticket.time}>
        {ticket.date}, {ticket.time}, {ticket.bookingCount}
      </button>
  )}

Сначала на экран выводится только время, то есть то что получается в результате работы первой строки(*1). Каким образом в tickets попадают значения времени после (*1), если значения времени лежат в отдельной переменной intervalsArr, и только после выполнения (*3), время вместе с датой попадает в tickets (но при этом дата почему-то не выводится)?

, 10:30, 0
, 10:34, 0
, 10:38, 0
, 10:42, 0
, 10:46, 0

А через пару секунд выводятся полноценные данные, с датой и количеством записей на определённое время:

06.06.22, 10:30, 1
06.06.22, 10:34, 2
06.06.22, 10:38, 0
06.06.22, 10:42, 0
06.06.22, 10:46, 0

Ответы (0 шт):