React: code only works when the development server has disconnected

Question

I was coding a simple todolist, adding an add event to it. The logic seems no problem, but it doesn't work and only worked when having the error:

the development server has disconnected

Below is my code:

componentDidMount() {
    this.addEvent = () => {
        let newEvent = document.getElementById('newEvent').value
        let countBeforeAdd = this.state.itemsReversed.length
        this.state.itemsReversed.push(
            {
                id: countBeforeAdd + 1,
                event: newEvent,
                dueTime: '',
                completed: false
            }
        )
        console.log(this.state.itemsReversed)
    }
}

render() {
    return (
        <main className='mainContent'>
            <form className='toDoListForm' action=''>
                <div className='divAdd'>
                    <input type='text' id='newEvent' name='newEvent' />
                    <button type='button' className='btnAdd' onClick={this.addEvent}>Add</button><br />
                </div>

                {this.state.itemsReversed.map((e, i) => (
                    <div className='divEvent' key={i}>
                        <label className='toDoList_label'>
                            <input className='toDoList_checkbox' type='checkbox' id={'item' + i + 1} name={'item' + i + 1} value={i + 1} onChange={this.handleRemainingCount} /> <span>{e.event}</span>
                        </label><br />
                    </div>
                )
                )}
            </form>
        </main>
    )
}

Images when it works

when it doesn't work: