Can't deselect all checkbox

I have a checkbox list and another checkbox at the top to check them all, but when I check them all, I can't clear them anymore.

class App extends React.Component {
  state = { checked: undefined }
  selectAll = ({ target: { checked } }) => this.setState({ checked })

  render() {
    const { checked } = this.state
    const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    return <ul>
      <input type='checkbox' onChange={this.selectAll} /> Check All
      {arr.map(i => <li>
        <input type='checkbox' checked={checked} />
        <span>checkbox {i}</span>
      </li>
      )}
    </ul>
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>