Select All functionality in drop down menu (using ReactJS and MDbootstrap ui)

I'm developing user interface using Reactjs and Mdbootstrap. In this project ' there is "drop down options" to select, i need to add "Select All" option, on clicking it this should select all option <MBDselectOptions> under <MBDselect>. How do i add select all functionality ? here is the code i used.

class DropDowm extends Component {
  constructor(props) {
    super(props)
    this.state = { data: this.prepareData(peops.data)}
  }

prepareData = (data) => {
   
    var mapper = data.map(x => {
      return {value: x, display: x}
    })
    return [{value: 'selectAll', display: 'Select All'}].concat(mapper)

   }

  toggleAll = (checked) => {
    const {data} = this.state;
    for (var i = 1; i <= data.length; i++){
      data[i].checked = checked;
    }
    this.setState({data}); 
    
  };

  handleChange = (value,checked) => {
    console.log("in handle change", value,checked)
    if (value === "selectAll") {
   this.toggleAll(value, checked)
    }
  };


render() {
return (

<div className="col-sm-3 px-2">
          <label>Select the data</label>
          <MDBSelect data = {this.state.data} getValue={(value, checked)=>{this.handleChange(value, checked)}} multiple>
          <MDBSelectInput selected = "Select" />
          <MDBSelectOptions>
            {this.state.data.map((ques) => {
              return(
              <MDBSelectOption value = {ques.value}>{ques.display}</MDBSelectOption>
              )
            })}
          </MDBSelectOptions>
         </MDBSelect> 
            
        </div>
)
}
}