Вложенная функция возвращает неожиданный результат

У меня есть компонент меню в моем компоненте заголовка. Компонент заголовка передает функцию компоненту меню => компоненту меню по умолчанию. Это работает, но функция возвращает нежелательные данные.

путь, по которому проходит моя функция: домашняя страница => заголовок => меню => меню по умолчанию

Функция:

changeBodyHandler = (newBody) => {
    console.info(newBody)
    this.setState({
      body: newBody
    })
}

Я передаю функцию с домашней страницы => заголовок следующим образом:

<HeaderDiv headerMenuClick = {() => this.changeBodyHandler}/>

затем через заголовок => меню => defaultMenu, используя:

<Menu MenuClick = {this.props.headerMenuClick} />

//==================== КОДЫ КОМПОНЕНТОВ ========================== //

домашняя страница:

class Homepage extends Component {
    constructor(props){
        super(props);

        this.state = {
            body: "Homepage"
        }

    this.changeBodyHandler = this.changeBodyHandler.bind(this)
    }

    changeBodyHandler = (newBody) => {
        console.info(newBody)
        this.setState({
            body: newBody
        })
    }

    render() {
        return (
            <div>
            <HeaderDiv headerMenuClick = {() => this.changeBodyHandler}/>
            { this.state.body === "Homepage" ?
              <HomepageBody />
              :  (<div> </div>)}
            </div>
        );
    }
}

заголовок:

class HeaderDiv extends Component {

  constructor(props) {
      super(props);
      this.state = {
          showMenu: 'Default',
      }
  }

    render(){
      return (
                <Menu MenuClick = {this.props.headerMenuClick}/>
      );
    }
}

меню:

import React, { Component } from 'react';
import DefaultMenu from './SubCompMenu/DefaultMenu';
import LoginCom from './SubCompMenu/LoginCom';
import SingupCom from './SubCompMenu/SingupCom';

class Menu extends Component {
//==================================================================
  constructor(props){
    super(props);
    this.state = {
      show: this.props.shows
    };
    this.getBackCancelLoginForm = this.getBackCancelLoginForm.bind(this);
  }
//===============================================================
//getBackCancelLoginForm use to hindle click event singin & singup childs
//===============================================================
  getBackCancelLoginForm(e){
    console.info("Hi")
      this.setState({
          show : "Default"
      })
  }
//=================================================================
// getDerivedStateFromProps changes state show when props.shows changes
//===============================================================
componentWillReceiveProps(nextProps) {
  if (this.props.show != this.nextProps){
      this.setState({ show: nextProps.shows });
  }
}
//======================================================================
  render() {
    return (
      <div>
        { this.state.show === "Singin" ?
          <LoginCom
            cencelLogin = {this.getBackCancelLoginForm.bind(this)}
          />
        : (<div> </div>)}

        { this.state.show === "Singup" ?
          <SingupCom
            cencelLogin = {this.getBackCancelLoginForm.bind(this)}
          />
        : (<div> </div>)}

        { this.state.show === "Default" ?
          <DefaultMenu MenuClicks = {this.props.MenuClick}/> : (<div> </div>)}

      </div>

    );
  }
}

Меню по умолчанию:

class DefaultMenu extends Component {
  render() {
    return (
          <div className = "box11" onClick = {this.props.MenuClicks("Homepage")}>
            <h3 className = "boxh3" onClick = {this.props.MenuClicks("Homepage")}>HOME</h3>

    );
  }
}

//================ Опишите ожидаемые и фактические результаты. ================//

Я ожидаю, что строка «Домашняя страница» будет назначена моему состоянию «тело»

но console.info показывает:

Class {dispatchConfig: {…}, _targetInst: FiberNode, nativeEvent: MouseEvent, type: "click", target: div.box11, …}

вместо "Главная"