I was using plain HTML for using `select` tag of html. Now, I'm trying to replace the HTML part by `react-bootstrap`. I have every thing similar except `react-bootstrap` tags but, I am getting undefined whenever I'm using `<ButtonGroup>` of `react-bootstrap` instead of `select` tag of plain HTML.  

This is working: 

```
  <select onChange={this.groupBySelector}>
    <option value="invoice">GROUP BY INVOICE</option>
    <option value="customer">GROUP BY CUSTOMER</option>
    <option value="month">GROUP BY MONTH</option>
  </select>        

```

This is not working: 

```
  <ButtonGroup>
    <DropdownButton title="GROUP BY" id="bg-nested-dropdown" onSelect={this.groupBySelector}>
      <MenuItem value="invoice">GROUP BY INVOICE</MenuItem>
      <MenuItem value="customer">GROUP BY CUSTOMER</MenuItem>
      <MenuItem value="month">GROUP BY MONTH</MenuItem>
    </DropdownButton>
  </ButtonGroup>        

```

`groupBySelector` function is as follows: 

```
groupBySelector(event){
    console.log(event);
    if ((event.target.value)==="invoice"){
      this.setState({invoiceType:'invoice'})
    } else if ((event.target.value)==="customer") {
      this.setState({invoiceType:'customer'})
    } else if ((event.target.value)==="month") {
      this.setState({invoiceType:'month'})
    } else {
      this.setState({invoiceType:'invoice'})
    }
  }

```