Группа флажков React / Индивидуальные флажки

Я создаю раздел своего приложения, который позволяет пользователю выбирать определенные элементы с помощью флажков. Моя цель - иметь массив в состоянии компонента (this.state.schoolsSelected), который редактируется при событиях щелчка, чтобы сохранить все выбранные значения onChange, а затем отправить этот массив.

Есть 5 вариантов разделов с флажками, которые представляют типы школ (elem, middle, high и т. д.), А затем каждая школа отображается с флажком отдельно. Моя конечная цель - получить все значения всех выбранных флажков.

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

Мое текущее решение состоит в том, чтобы каждый флажок отображался с его свойством "checked", представляющим группу школ в качестве его отмеченного состояния (т.е. this.state.isMiddleChecked, this.state.isHighChecked). Когда я устанавливаю флажок, например «Выбрать все средние», выбираются все средние школы.

return(
      <Col key = {index} sm = {3}>
        <Checkbox
          checked = {this.state.isHighChecked}
          value = {index}
          onChange = {this.onChange}
        >{school.name}</Checkbox>
      </Col>
    )

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

Пожалуйста, дайте мне знать, если вам нужны какие-либо пояснения по поводу того, что я прошу.