Generowanie obrazu przy użyciu html2canvas

Mam w react-leaflet mapkę z markerami. Dodałem funcję, która robi raport PDF do każdego markera i chciałem na koniec raportu dodać obraz przedstawiający kawałek mapki z tym jednym markerem, którego dotyczy raport. Problem mam z wygenerowaniem tego obrazu. Próbuję to zrobić przy pomocy html2canvas. Nie chcę w żaden sposób wyświetlać tego kawałka mapy na ekranie bo za jednym kliknięciem może generować się nawet kilkaset raportów. W const map mam ten kawałek mapy ale dostaję 

index.ts:36 Uncaught (in promise) Error: Element is not attached to a Document
    at index.ts:36:1
    at step (tslib.es6.js:102:1)
    at Object.next (tslib.es6.js:83:1)
    at tslib.es6.js:76:1
    at new Promise (<anonymous>)
    at __awaiter (tslib.es6.js:72:1)
    at renderElement (index.ts:29:1)
    at html2canvas (index.ts:20:1)
    at savePDF (App.js:160:1)
    at App.js:127:1
(anonymous) @ index.ts:36
step @ tslib.es6.js:102
(anonymous) @ tslib.es6.js:83
(anonymous) @ tslib.es6.js:76
__awaiter @ tslib.es6.js:72
renderElement @ index.ts:29
html2canvas @ index.ts:20
savePDF @ App.js:160
(anonymous) @ App.js:127
await in (anonymous) (async)
(anonymous) @ App.js:127
Promise.then (async)
downloadPDFs @ App.js:124
onClick @ App.js:241
handleClick @ index.es.js:5283
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
api.js:46 

const savePDF = async (pdfName, images, details) => {
    const bounds = [
      [-3000, -3000],
      [3000, 3000],
    ];
  
    const map = (
      <div id="map-container" style={{display: 'none'}}>
        <MapContainer
          crs={L.CRS.Simple}
          bounds={bounds}
          center={details.locationOnDrawing} 
          zoom={13} 
          scrollWheelZoom={false}
        >
          <ImageOverlay
            url={currDrawing}
            bounds={bounds}
          >
            <Marker position={details.locationOnDrawing} />
          </ImageOverlay>
        </MapContainer>
      </div>
    );

    const input = document.getElementById("map-container");
    const canvas = await html2canvas(input);
    const imgData = canvas.toDataURL("image/jpg")
    console.log(imgData)
   

    const doc = (
      <PDF photos={images} map={imgData} details={details}/>
    );

    const pdfBlob =  await pdf(doc).toBlob();

    // Save the PDF blob as file
    saveAs(pdfBlob, pdfName);
  }

Widziałem podobne przykłady wykorzystania html2canvas ale różnica była taka, że elementy, z których były generowane obrazy były renderowane a ja mam tutaj JSX, z którym się nic nie dzieje. Nie wiem czy w tym problem...

index.ts:36 Uncaught (in promise) Error: Element is not attached to a Document

No tutaj ci pisze błąd. Pytanie, co z tym zrobisz.

a ja mam tutaj JSX

Ale do czego jest to JSX transpilowane? Bo jak rozumiem, to nie jest React?

Chociaż w sumie w stosie wywołań masz funkcje reactowe, to już nie rozumiem.

html musi zostać wygenerowany. Stwórz sobie diva, wyślij go poza obszar ekranu, wygeneruj pdf i usuń diva.

Tak jak mówiliście, html musiał zostać wygenerowany. Wykorzysałem mapkę która już była wygenerowana z tym, że po kliknięciu 'wygeneruj pdf' renderuje się tylko jeden marker, dla danego pdf, po skończeniu przekazuje do renderowania kolejny marker i w momencie gdy wszystkie pdfy mam gotowe, wyświetlają się ponownie wszystkie naraz.

Daje też to fajny efekt wizualny, jak jest informacja Exporting to pdf... i pojawiają się i znikają kolejne markery.

Dzięki.