В порядке выступлений

Состав участников должен идти в том порядке, в каком группы выступают, а в bands.js они лежат в порядке регистрации. Сортировку вы знаете из курса JavaScript: sort() с функцией сравнения. Время — это текст, поэтому сравнивайте его через localeCompare():

const byTime = [...bands].sort((a, b) => a.time.localeCompare(b.time));

Тексты сравниваются посимвольно, поэтому время сортируется правильно, пока у всех записей одинаковый вид: "09:00" окажется раньше "18:30", а "9:00" — позже, потому что 9 идёт после 1. У нас в часах всегда две цифры.

Зачем нужен [...bands]? sort() не создаёт новый массив, он сортирует сам массив. Здесь это bands, который всё приложение импортирует из bands.js. Компонент, который отсортировал бы его, изменил бы порядок и для всех остальных компонентов — просто тем, что отрисовался. Компоненты не меняют данные, которые получают: они только смотрят на них и показывают. (В уроках про состояние вы увидите, что React такое изменение даже не заметил бы.) Поэтому сортируйте копию: её создаёт spread-синтаксис, а sort() сортирует только копию.

Отсортированную копию можно затем отфильтровать, и группы каждого дня останутся в порядке времени. Работает и наоборот: filter() создаёт новый массив, поэтому его результат можно сортировать без копии. bands.filter(…).sort(…) меняет только новый массив.

Типичная ошибка — bands.sort(…) без копии. Страница может выглядеть правильно, но массив в bands.js теперь тоже отсортирован, и остальные части приложения получают его в таком порядке.