It passed the test but when I tried it, it gave an error. "Manage State Locally First"

Tell us what’s happening:
It doesn’t work for some reason?
Your code so far


class DisplayMessages extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: '',
    messages: []
  }
  this.handleChange = this.handleChange.bind(this);
  this.submitMessage = this.submitMessage.bind(this);
}
// Add handleChange() and submitMessage() methods here
handleChange(event) {
this.setState(state => ({
  input: event.target.value,
}))
}
submitMessage() {
this.setState(state => ({
messages: state.messages.concat(state.input),
input: ""
}));
}
render() {
 var li = this.state.messages.map((message, i) => (
   <li key={i}>{message}</li>
 ))
  return (
    <div>
      <h2>Type in a new Message:</h2>
      { /* Render an input, button, and ul below this line */ }
      <input onChange={this.handleChange} value={this.state.input}/>
      <button onClick={this.submitMessage}>Add message</button>
      <ul>
      {li}
      </ul>
      { /* Change code above this line */ }
    </div>
  );
}
};
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36.

Challenge: Manage State Locally First

Link to the challenge:

This where the problem,

It works when I have


  this.setState ({
    input: event.target.value,
  })