How to pass clicked menu value to Apps.js?

I would like to retrieve the item clicked in the menu and to call a function in the App.js file.

Example:

• If I click on the item “profile”, it calls a function “profile” which displays the user’s profile.

• If I click on the “log” item, it calls a “login” function which allows the user to connect.

App.js:

import './App.css';
import Menu from './Menu';

function menu_click(){
  console.log('item menu clicked') // get menu click value
}

function App() {
  return (
    <div className="App">
      <Menu />
    </div> 
  );
}

export default App;

Menu.js:

import * as React from 'react';
import PropTypes from 'prop-types';
import { Dropdown } from '@mui/base/Dropdown';
import { Menu } from '@mui/base/Menu';
import { MenuButton as BaseMenuButton } from '@mui/base/MenuButton';
import { MenuItem as BaseMenuItem, menuItemClasses } from '@mui/base/MenuItem';
import { styled } from '@mui/system';
import { RxHamburgerMenu } from "react-icons/rx";


function MenuSection({ children, label }) {
  return (
    <MenuSectionRoot role="group">
      <MenuSectionLabel>{label}</MenuSectionLabel>
      <ul>{children}</ul>
    </MenuSectionRoot>
  );
}

MenuSection.propTypes = {
  children: PropTypes.node,
  label: PropTypes.string.isRequired,
};

export default function WrappedMenuItems() {
  const createHandleMenuClick = (menuItem) => {
    return () => {
      console.log(`Clicked on ${menuItem}`); // work fine but how to pass to App.js ?
    };
  };

  

  return (
    <Dropdown>
      <MenuButton><RxHamburgerMenu /></MenuButton>
      <Menu slots={{ listbox: Listbox }}>
        <MenuSection label="Inventaire">
          <MenuItem onClick={createHandleMenuClick('Back')}>Cuivre</MenuItem>
          <MenuItem onClick={createHandleMenuClick('Forward')} disabled>Fibre</MenuItem>
        </MenuSection>
        <MenuSection label="Rapport">
          <MenuItem onClick={createHandleMenuClick('Save as...')}>test1</MenuItem>
          <MenuItem onClick={createHandleMenuClick('Print...')}>test2</MenuItem>
        </MenuSection>
        <MenuSection label="Configuration">
          <MenuItem onClick={createHandleMenuClick('Zoom in')}>Mon profil</MenuItem>
          <MenuItem onClick={createHandleMenuClick('log')}>Log</MenuItem>
        </MenuSection>
        {/*<li className="helper">Current zoom level: 100%</li>*/}
      </Menu>
    </Dropdown>
  );
}


const Listbox = styled('ul')(
  ({ theme }) => `
  font-size: 12px;
  box-sizing: border-box;
  padding: 6px;
  margin: 12px 0;
  min-width: 200px;
  border-radius: 12px;
  overflow: auto;
  outline: 0px;
  background: white;
  border: 1px solid #452547;
  color: #452547;
  box-shadow: 'rgba(0,0,0, 0.05)';
  z-index: 1;
  `,
);

const MenuItem = styled(BaseMenuItem)(
  ({ theme }) => `
  list-style: none;
  padding: 8px;
  border-radius: 8px;
  cursor: default;
  user-select: none;

  &:last-of-type {
    border-bottom: none;
  }

  &:focus {
    outline: 3px solid #2B8000;
    background-color: #f9bbf3;
    color: #452547;
  }

  &.${menuItemClasses.disabled} {
    color: #B2B9BF;
  }
  `,
);

const MenuButton = styled(BaseMenuButton)(
  ({ theme }) => `
  font-size: 24px;
  line-height: 1.5;
  padding: 8px 16px;
  border-radius: 8px;
  color: white;
  transition: all 150ms ease;
  cursor: pointer;
  background: transparent;
  border: 0px solid #452547;
  color: #4B296D;


  &:hover {
    color:#68ED00;
  }

  &:active {
    color: tomato;
  }
`,
);



const MenuSectionRoot = styled('li')`
  list-style: none;

  & > ul {
    padding-left: 1em;
  }
`;

const MenuSectionLabel = styled('span')`
  display: block;
  padding: 10px 0 5px 10px;
  font-size: 12px;
  font-weight: bold;  
  color: #681E73;
`;