Reactで子要素を渡せるコンポーネントを作りたい

<ButtonGroup selected={this.state.selected} onSelect={this.onSelect}>
  <Button>foo</Button>
  <Button>bar</Button>
  <Button>baz</Button>
</ButtonGroup>

var ButtonGroup = React.createClass({
  onSelect: function(index) {
    this.props.onSelect(index);
  },
  render: function() {
    var children = this.props.children.map(function(child, i) {
      return React.addons.cloneWithProps(child, {
        key: i,
        index: i,
        onClick: this.onSelect,
        selected: +this.props.selected === i,
      });
    }, this);

    return <div className="btnGroup">{children}</div>;
  }
});

var Button = React.createClass({
  onClick: function() {
    this.props.onClick(this.props.index);
  },
  render: function() {
    var cls = this.props.selected ? 'btn selected' : 'btn';
    return <span className={cls} onClick={this.onClick}>{this.props.children}</span>;
  }
});