Checkbox не реагирует на клики, как мне правильно передать state и в чем я делаю ошибку

Как менять состояние? Ибо чекбоксы инпута не работает. В чем ошибка?

const result = [
    {value: "Без пересадок", isChecked: false},
    {value: "1 пересадка", isChecked: false},
    {value: "2 пересадки", isChecked: false},
    {value: "3 пересадки", isChecked: false}
]

const elem = result.slice()

const [transfers, setTransfers] = useState(result)


const handleAllChecked = (event) => {
    transfers.forEach(transfer => {
        const elem = result.slice()
        transfer.isChecked = event.target.checked
        setTransfers(elem)
    })
}

const handleCheckElement = (event) => {
    const elem = transfers.slice()
    elem.forEach((transfer) => {
        const res = transfer;
        if (res.value === event.target.value) {
            res.isChecked = event.target.checked
        }
    })
    setTransfers(elem)
}


const checkbox = elem.map((transfer) => (
        <li key={+new Date() + Math.random()}>
            <input className={stl.checkbox} onChange={handleCheckElement} type="checkbox"
                   checked={transfer.isChecked} value={transfer.value}/> {transfer.value}
        </li>
    )
)
return (
    <div className={stl['side-bar']}>
        <h3 className={stl.title}> Количество пересадок </h3>
        <ul className={stl['filter-list']}>
            <li><input className={stl.checkbox} type="checkbox" onChange={handleAllChecked}
                       value="checkedAll"/> Все
            </li>
            {checkbox}
        </ul>
    </div>
);

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

Автор решения: Александр

У вас определенно проблемы с handleAllChecked попробуйте это решение https://codesandbox.io/s/muddy-leftpad-9xysr?fontsize=14&hidenavigation=1&theme=dark

→ Ссылка