madbliss_official

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

const allFilters = [
  { id: 'all', title: 'Все' },
  { id: 'noStop', title: 'Без пересадок' },
  { id: 'oneStop', title: '1 пересадка' },
  // и т.д.
]

return <div className="filters">
  <h3 className="filters__title"> Количество пересадок </h3>
  {allFilters.map(({id, title}) => (
    <div className="filters__item" key={id}>
      <input type="checkbox" id={id} hidden
             defaultChecked={props.sortStops[id]}
      />
      <label htmlFor={id} onClick={() => props.onClick(id)}>
        {title}
      </label>
    </div>)
  )}
</div>

Во вторых обратите внимание вместо
onClick={props.onClick}

можно сразу передать id в функцию-обработчик, а не выковыривать ее через e.target
onClick={() => props.onClick(id)}

И обработчик нажатия тогда будет выглядеть

const onClickStops = chosenOption => {
  // обработчик нажатия на фильтры выбора количества остановок
  setSortStops({
    ...sortStops,
    chosenOption: !sortStops[chosenOption]
  })
}