React: Dynamically generated <select> elements - setting 'selected' state in a mapped element

I'm trying to handle the selection of dynamically generated <option>'s in a <select> element. I understand that the onChange trigger is what i need to setState with but i can't seem to get her to work.

Here's what i've got going on:

import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'

const ITEMS = [
      { name: 'centos', text: 'centos', value: 'centosValue' },
      { name: 'ubuntu', text: 'ubuntu', value: 'ubuntuValue' },
]

const SelectComponent = (props) => (
  <select name={props.name}>
    {_.map(props.items, (item, i) => <Option
      key={i}
      name={item.name}
      value={item.value}
      text={item.text}
      handleSelect={props.handleSelect}
      />
    )}
  </select>
)

const Option = (props) => (
  <option 
    value={props.value} 
    onChange={props.handleSelect}>{props.text}</option>
)

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      selected: ''
    }
    this.handleSelect = this.handleSelect.bind(this)
  }
  handleSelect(e) {
    this.setState({selected: e.target.value})
  }
  render() {
    return (
      <div>
        <SelectComponent 
          name="testSelect" 
          items={ITEMS} 
          handleSelect={this.handleSelect}
        />
        <div>
          <p>Selected: {this.state.selected}</p>
        </div>
      </div>
    )
  }
}

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

This code does render the dropdown selector as expected but it isn't triggering the setState on the selected item. Any thoughts?

Also, does anyone have any pro-tips for troubleshooting this kind of problem? Any super slick dev-tools you know of or methods for finding out which props are being passed, etc?