How to keep a React component running in the background for report generation while navigating to other screens?

I am generating a report for multiple datasets by overlaying WMS images from GeoServer as a slideshow and taking screenshots using the html2canvas library.

The problem is that if the user navigates to another component or screen, then the slideshow component unmounts and report generation stops. Is there a way to keep the slideshow component running in the background using React.Suspense or any other method?

Here is an example of the component that is generating the report:

import React, { useEffect } from 'react';
import html2canvas from 'html2canvas';

function ReportGenerator() {
  useEffect(() => {
    // Load WMS layers and take screenshots
    // ...
  }, []);

  return (
    <div>
      {/* Map and WMS layers */}
    </div>
  );
}

export default ReportGenerator;

Is there any other way or a better way to handle this issue?

To give you a better overview of my component structure, it is set up as follows:

App
|____Switch
|     |___Route 
|     |    |___MapScreen
|     |            |____ Layout
|     |                     |____Sidebar
|     |                     |____Main
|     |                              |____Wrapper
|     |                                       |_____MapLayout
|     |                                       |_____ReportGenerator
|     |___Route 
|     |     |___DashboardScreen
|     |              |____ Layout
|     |                       |__Sidebar
|     |                       |____Main
|     |                            |_____NewsFeedList
|     |                                       |_____DataCard
|     |                                       |_____Buttons