Help me understand x undefined?

Onclick, I am assuming the handleClick function is executed,
but why in the world would this.refs.list.value be equal to 'undefined'?

class Application extends React.Component {
constructor(){
  super();
  this.handleClick = this.handleClick.bind(this);
}
handleClick(e){
  let x = this.refs.list.value;
  console.log(x);
}

render() {
return <div>
  <select ref="list" defaultValue="">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </select>
  <input type="button" value ="Click Me" onClick={this.handleClick} /> </div>; } }

React.render(<Application />, document.getElementById('app'));