Попытка вызвать функцию в React

Question

У меня есть файл сценария Java под названием Toolbar.js, в котором я пытаюсь вызвать функцию из моего файла App.js следующим образом:

<DrawerToggleButton click={props.drawerClickHandler}/>

Выше не работает, этопоказывает «Неразрешенная переменная boxClickHandler», что, как я полагаю, означает, что Toolbar.js не может видеть функции в App.js. Я пробовал это без использования реквизита без результатов. Как я могу заставить это работать?

Также просто хочу указать, что программа будет собираться и запускаться без ошибок, просто кнопка, с которой я пытаюсь сопоставить функцию, ничего не делает, когда я нажимаю ее.

Код ниже:

Toolbar.js:

import React from 'react';
import './Toolbar.css';
import  DrawerToggleButton from '../SideDrawer/DrawerToggleButton'
import '../SideDrawer/DrawerToggleButton';
import sideDrawer from "../SideDrawer/SideDrawer";

const toolbar = props =>(
    <header className="toolbar">
        <nav className="toolbar_navigation">
            <div>
                <DrawerToggleButton click={props.drawerClickHandler}/>
            </div>
            <div className="toolbar_logo"><a href="/dashboard">Kleen Portal</a></div>
            <div className="spacer" />
            <div className="toolbar_navigation-items">
                <ul>
                    <li><a href="/">Logout</a></li>
                </ul>
            </div>
        </nav>
    </header>
);

export default toolbar;

App.js:

import React, { useState, useEffect } from "react";
// import logo from './logo.svg';
import './App.css';
import Routes from "./Routes";
import { Auth } from "aws-amplify";
import { Link, withRouter } from "react-router-dom";
// import { Navbar } from "react-bootstrap";
import  Toolbar from './components/Toolbar/Toolbar';
import SideDrawer from './components/SideDrawer/SideDrawer';
import Backdrop from './components/Backdrop/Backdrop';


function App(props) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [isAuthenticating, setIsAuthenticating] = useState(true);
  const [sideDrawerOpen, setIsSideDrawerOpen] = useState(false);

  useEffect(() => {
    onLoad();
  }, [isAuthenticating, isAuthenticated]);

  async function onLoad() {
    try {
      await Auth.currentSession();
      setIsAuthenticated(true);
      props.history.push("/dashboard");
    }
    catch(e) {
        alert(e);
    }
    setIsAuthenticating(false);
  }

  function handleLogout() {
    setIsAuthenticated(false);
    props.history.push("/login");
  }

  function drawerToggleClickHandler(){
    setIsSideDrawerOpen(!sideDrawerOpen)
  }

  let sideDrawer;
  let backdrop;
  let toolBar;

  if(isAuthenticated){
    toolBar = (
        <Toolbar
            handleLogout={handleLogout}
            drawerClickHandler ={drawerToggleClickHandler}
        />
    )
  }

  if (isAuthenticated && sideDrawerOpen){
    sideDrawer = <SideDrawer/>;
    backdrop = <Backdrop/>
  }
  return (
    <div className="App container" style={{height: '100%'}}>
      {toolBar}
      {sideDrawer}
      {backdrop}
      {/*<Toolbar/>*/}
      {/*<SideDrawer/>*/}
      {/*<Backdrop/>*/}
      <Routes appProps={{ isAuthenticated, setIsAuthenticated }} />
    </div>
  );
}

export default withRouter(App);

DrawerToggleButton.js:

import React from 'react';
import './DrawerToggleButton.css'

const drawerToggleButton = props => (
    <button className="toggle-button" onClick={props.click}>
        <div className="toggle-button_line" />
        <div className="toggle-button_line" />
        <div className="toggle-button_line" />
    </button>
);

export default drawerToggleButton;