OnsenUi Lifting state up not cascading

main.js

import React from 'react';
import ReactDOM from 'react-dom';

import ons from 'onsenui';

import {
  Navigator,
  Page,
  BackButton,
  Button,
  Toolbar
} from 'react-onsenui';

class MomPage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      counter : 0
    }
  }
  onCounterClick = () => {
    console.log(this.state.counter, "+1 on Mom")
    this.setState({counter:this.state.counter + 1})
  }

  gotoDaughter = () => {
    this.props.navigator.pushPage({'comp': DaughterPage,'props':{counter:this.state.counter, onCounterClick:this.onCounterClick}});
  }

  renderToolbar = () => {
    return (
      <Toolbar>
        <div className='center'>Mom: {this.state.counter}</div>
      </Toolbar>
    );
  }

  render() {
    return (
      <Page renderToolbar={this.renderToolbar} >
        <Button className='center' modifier='large outline' onClick={this.gotoDaughter}>Go to daughter</Button>
      </Page>
    );
  }
}

class DaughterPage extends React.Component {

  renderToolbar = () => {
    return (
      <Toolbar>
        <BackButton className='left'></BackButton>
        <div className='center'>Daughter: {this.props.counter}</div>
      </Toolbar>
    );
  }

  render() {
    return (
      <Page renderToolbar={this.renderToolbar} >
        <Button className='center' modifier='large outline' onClick={this.props.onCounterClick}>Click me</Button>
      </Page>
    );
  }
}

class App extends React.Component {
  renderPage(route, navigator) {
    route.props = route.props || {};
    route.props.navigator = navigator;

    return React.createElement(route.comp, route.props);
  }

  render() {
    return (
      <Navigator
        initialRoute={{comp: MomPage}}
        renderPage={this.renderPage}
      />
    );
  }
};
ReactDOM.render(<App />, document.getElementById('app'));