How can I access nested function from navbar.js button in reactjs?

Question

I want to include a save button in my navbar which should evoke my savebuttonhandler1 function. However, the savebuttonhandler1 function is a nested function within a functional component (rete.js).

Rete.js is a functional component serving one page of my website. It calls an API (dialogflow). Navbar is layered on top of every single page.

And this is the hierarchy of the components: App.js (parent) --> Navbar.js (child)

App.js (parent) --> Canvas.js (parent) --> Rete.js (child)

Do you know any way to access the nested function? Can I use react context to do it?

Here is my navbar.js (simplified):

const Navbar = (props) => {
  return (
    <div className={root}>
      <AppBar position="absolute" className={root}>
        <Toolbar>
          <img className={img} src={Logo} alt={Logo} />
          <Typography variant="h4" className={title} component={Link} to="/">
            MyTeachingBot
          </Typography>
                <Fragment>
                  <Button
                    className={createnewButton}
                    component={Link}
                    endIcon={<SaveIcon />}
                    onClick={savebuttonhandler1} --> this is the button where I want to envoke the nested function
                  >
                    Save and Test
                  </Button>
      
                
            ]
          )}
        </Toolbar>
      </AppBar>
    </div>
  );
};

And here is the nested savebuttonhandler1 function in rete.js:

const Rete = (props) => {
   const saveButtonHandler1 = async () => {
     ...some Code}