someting wrong in react to do list

Question

I have a problem in (To do list), When I type in input element i get errors,but if I press add button, It add dots, How to solve it if anyone know answer me please, thank you

 `    class ToDoList extends React.Component {
 constructor(props) {
 super(props);

 this.state = {
   userInput: this.props.value,
   items: []
   };
 }

the error is in changeInput function

changeInput(event) {
 this.setState({
  userInput: event.target.value
});
 }

 addToList(event) {
   let arrayList = this.state.items;
   arrayList.push(event);

 this.setState({
   items: arrayList,
   userInput: ""
 });
}

 render() {
   return (
   <div style={styles}>
    <div class="to-do-list">
      <h2>My To Do List</h2>
      <input
        type="text"
        value={this.state.userInput}
        onChange={this.changeInput}
      />

      <button onClick={() => this.addToList(this.state.userInput)}>
        Add
      </button>
      <ul>{this.state.items.map(event => <li>{event}</li>)}</ul>
    </div>
  </div>
  );
 }
}
ReactDOM.render(<ToDoList />, document.getElementById("root"));`