Understanding react this.setState() specifically in Create a Controlled Input

Hi guys, I’m trying to understand setting state better.
the following code works and passes the tests:

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

however the following code passes the tests but throws exception in the browser’s console:

handleChange(event) {
    this.setState(() => ({
      input: event.target.value
    }));
  }

but the following adjusted version passes tests and works fine in the browser without exceptions thrown:

handleChange(event) {
    const value = event.target.value;
    this.setState(() => ({
      input: value
    }));
  }

So why the last one works in the browser but the one before it doesn’t?
The thrown exception is: Cannot read property 'value' of null.
Thanks for any help.
Link to the challenge:

I’m going back through the react challenges and had the same problem. I even forgot I posted about it earlier. I think it is something to do with what this article explains: " React recycles events objects for performance reasons"