React component - continue working also when not rendered

Question

I have a single page React app. The App.js decides what page to show, according to information from the server. There is a Stopwatch component, which rendered only with 2 of the pages. This is the code, from App.js:

render() {
  switch (this.state.patientState) {
      case statesEnum.WAITING:
        main = <WaitingPage socketClient={this.socketClient} />;
        break;
      case statesEnum.TURN_ARRIVED:
        main = <TurnArrivedPage />;
        break;
      case statesEnum.END:
        return <EndPage />; // Because we don't need a stopper here...
      default:
        return <h1>Error...</h1>;
   }

   return (
     <main>
       <Stopwatch initialSeconds={this.state.seconds} initialMinutes={this.state.minutes} initiallHours={this.state.hours} />
       {main}
     </main>
   );
}

But I want the stopper to continue counting up, even when it's not rendered on the screen. What can I do?

Thank's!

Answer 1

So thank's to @developer, this the return of App.js 's render function:

return (
  <main>
    <StopwatchManager
      showStopwatch={showStopwatch}
      initialSeconds={this.state.stopwatchInitialData.seconds}
      initialMinutes={this.state.stopwatchInitialData.minutes}
      initialHours={this.state.stopwatchInitialData.hours}
    />
    {main}
  </main>
);

StopwatchManager contains all the functionality of the stopwatch. It always rendered, but it decides to actually show the stopwatch by the showStopwatch prop.