React Hooks: How to pass function from one component to another?

Question

I have an app with the following structure.

App.js

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <EditorWrapper />
    </BrowserRouter>
  );
}

export default App;

EditorWrapper.js

import EmailSettings from "../features/signature/Settings";

function EditorWrapper() {

  return (
    <div>
      <div>
        <Switch>
          <Route exact path="/settings/"  component={EmailSettings}/>
        </Switch>
      </div>
    </div>
  );
}

export default EditorWrapper;

Navbar.js

function Navbar() {
  return (
    <nav class="navbar navbar-light bg-light">
      <span class="navbar-brand mb-0 h1">Save</span>
    </nav>
  );
}

export default Navbar;

Settings.js

function Settings() {
  const handleSubmit = () => {
    //save data
  }
  return (
    <div>
      <button onClick={() =>handleSubmit()}>Save</button>
    </div>
  )
}

export default Settings;

Problem: How do I pass the function handleSubmit from settings to navrbar.js without using redux?