Reactjs toggle object state

I want to toggle true/false when I click on each elements, but it reset after click on other element, example: if you click aaa it toggle between true/false but if you click bbb , aaa reset to false

class Search extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    data: {aaa: false,bbb: false,ccc: false}
    }

  }
  
    Handler = (which, status) => {
       this.setState({data: {...this.state.data, [which]: !this.state.data[which]} })
       console.log(this.state.data)
    }
  
  render() {
    return (
      <ul>
      <li onClick={()=>this.Handler('aaa')}>{this.state.data.aaa ? 'true' : 'false'}</li>
      <li onClick={()=>this.Handler('bbb')}>{this.state.data.bbb ? 'true' : 'false'}</li>
      <li onClick={()=>this.Handler('ccc')}>{this.state.data.ccc ? 'true' : 'false'}</li>
      </ul>
    )
  }
}

ReactDOM.render(<Search />, document.querySelector("#app"))
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.3.1/reactstrap.full.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

<div id="app"></div>

What I have done wrong?