How do i access a function in a component with a button in a different component in React?

I am using react-timer-hook to set up a stopwatch for my React Application. So I got a Timer.js file where this stopwatch is working with a start and pause button. I am calling the component in App.js so the timer shows up on all pages. My next step is to set up that start functionality in a different component named Start.js (and later on the pause in the final page), but I can't figure out how I can pass it to this component.

This is my App.js:

function App() {
  return (
    <Router>
      <div className="App">
        <Timer/>
        <Routes>
            <Route path="/" element={ <Start /> }></Route>
            // Other routes
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Timer.js file:

function MyTimer({ expiryTimestamp }) {
  const {
    seconds,
    minutes,
    start,
    pause,
  } = useStopwatch({ expiryTimestamp, onExpire: () => console.warn('onExpire called') });


  return (
    <div className="timer">
      <div className='timer-inside' >
        <span>{minutes < '10' ? '0' + minutes : minutes}</span>:<span>{seconds < '10' ? '0' + seconds : seconds}</span>
      </div>
      <button onClick={start}>Start</button>
      <button onClick={pause}>Pause</button>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <MyTimer/>
    </div>
  );
}

So basically i want the <button onClick={start}>Start</button> snippet to work in a file called Start.js, instead of the Timer.js itself.