Добавление в массив

Состояние может хранить и массив. Вот «Моё расписание» — группы, которые вы не хотите пропустить. Состояние хранит их идентификаторы и начинается как пустой массив:

const [schedule, setSchedule] = useState([]);

Чтобы добавить группу, хочется воспользоваться push(). Не делайте этого. push() меняет массив, который хранит React, а React этого не замечает: он видит изменение, только когда сеттер получает значение, отличное от того, что было в состоянии, а тот же массив, пусть даже с ещё одним элементом, — это не другое значение. Поэтому никогда не меняйте значение, лежащее в состоянии. Создайте новый массив и передайте его сеттеру.

Новый массив создаёт spread из курса JavaScript: [...schedule, id] — это новый массив со всем содержимым schedule и id в конце. Он делается из старого массива, поэтому записывается в функции-обновителе:

function handleAdd(id) {
    setSchedule((schedule) => [...schedule, id]);
}

Чтобы показать расписание, при отрисовке найдите группы, чьи идентификаторы в нём есть:

const myBands = bands.filter((band) => schedule.includes(band.id));

<ul className="schedule">
    {myBands.map((band) => (
        <li key={band.id}>{band.name}</li>
    ))}
</ul>

Почему идентификаторы, а не объекты групп целиком? Данные о группах хранятся в одном месте, в bands, а состояние содержит только то, что выбрал посетитель. При каждой отрисовке filter() сводит их вместе.