I'm rendering a <select> in a stateful component:

class StatefulContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {mode: 'all'};
    }

    render() {
        return <div>
            <form>
                <select value={this.state.mode} onChange={this.handleModeSelection}>
                    <option value='all'>Show all</option>
                    <option value='one'>Just the first one</option>
                </select>
            </form>
        </div>;
    }

    handleModeSelection({target: {value}}) {
        this.setState({mode: value});
    }
}

React.render(
    <StatefulContainer/>,
    document.getElementById('root')
);

and can't figure out why it's impossible for the browser user to change the selected option to one. Here's a JS Bin.