Checkbox: checkbox select all and unselect not effect on all

I'm trying to do a button to check and uncheck all boxes using react.But for some reason, 'Select All' is only selecting three of them, while 'Unselect All' is only unselecting those three and selecting the rest two.

My code is as below:

<button type='button' className='btnSelectAll' onClick={this.selectAllOrNone}>Select All</button>

this.selectAllOrNone = () => {
            let events = document.getElementsByClassName('toDoList_checkbox')
            let btnSelectAll = document.getElementsByClassName('btnSelectAll')[0]
            console.log(events)

            for (let i = 0; i < events.length; i++) {
                if (btnSelectAll.innerHTML === 'Select All') {
                    events[i].checked = true
                    btnSelectAll.innerHTML = 'Unselect All'
                }
                else if (btnSelectAll.innerHTML === 'Unselect All') {
                    events[i].checked = false
                    btnSelectAll.innerHTML = 'Select All'
                }

                console.log('btnSelectAll')
            }
        }

Anyone can suggest what the problem is?enter image description here