React Mixin behavior in es6

LabelButtonMixin.jsx

let ReactMixin = InnerComponent => class extends React.Component{
  constructor(){
    super()
    this.state = {count: 0}
    this.increment = this.increment.bind(this);
  }
  increment(){
    this.setState({count: this.state.count+1})
  }
  componentWillMount(){
    console.log('will mount')
  }
  render(){
    return <InnerComponent update={this.increment} {...this.state} {...this.props} />
  }
  componentDidMount(){
    console.log('mounted')
  }
}

class Button extends React.Component {
  render(){
    return <button onClick={this.props.update}>{this.props.txt} - {this.props.count}</button>
  }
}

class Label extends React.Component {
  render(){
    return <label onClick={this.props.update}>{this.props.txt} - {this.props.count}</label>
  }
}


let ButtonMixed = ReactMixin(Button);
let LabelMixed = ReactMixin(Label);

class App extends React.Component {
  render(){
    return (<div>
      <ButtonMixed txt="I am a mixed button" />
      <LabelMixed txt="I am a mixed label" />
      </div>
      )
  }
}


React.render(<App />, document.body);