запускать функцию перед генерацией pdf в react-pdf плагине react

Я использую два плагина 1react-pdf для генерации pdf и плагин html-to-image для конвертации html в изображение. Но проблема в том, что функция конвертации срабатывает только после создания pdf. Вот эта функция:

const downloadImage = async () => {
  return await htmlToImage.toPng(testEl.current, {
    cacheBust: false,
  })
}

В этой функции я возвращаю URL, который помещаю в компонент <Image />. Например:

<Image src={downloadImage} cache={false} />

Может быть, поместить функцию в useEffect? Пожалуйста, помогите мне с этим. Вот полный код:

import {PDFDownloadLink, Page, Text, View, Document,Image} from "@react-pdf/renderer";
import * as htmlToImage from "html-to-image";

export function CustomComponent() {
  const testEl = useRef();

  const downloadImage = async () => {
    return await htmlToImage.toPng(testEl.current, {
      cacheBust: false,
    });
  };

  const MyDoc = () => (
    <Document>
      <Page>
        <View>
          <Image src={downloadImage} cache={false} />
        </View>
      </Page>
    </Document>
  );

  return (
    <>
      <div ref={testEl} className="test">
        Text
      </div>
      <PDFDownloadLink document={<MyDoc />} fileName="print-test.pdf">
        {({ blob, url, loading, error }) =>
          loading ? "Loading document..." : "Download now!"
        }
      </PDFDownloadLink>
    </>
  );
}

EDIT

const downloadImage = () => {
  return htmlToImage.toPng(testEl.current, {
    cacheBust: false,
  });
};

const MyDoc = () => {
  return (
    <Document>
      <Page>
        <View>
          <Image src={downloadImage} cache={false} />
        </View>
      </Page>
    </Document>
  );
};

const asyncF = async () => {
  await downloadImage();
  await MyDoc();
};

useEffect(() => {
  asyncF();
});

EDIT 2

import React, { useState, useEffect, useRef, Fragment } from "react";
import { usePDF, Page, Text, View, Document, Image } from "@react-pdf/renderer";
import * as htmlToImage from "html-to-image";

export function CustomComponent({}) {

  const downloadImage = async () => {
    return await htmlToImage.toPng(
      document.querySelector(".test"),
      { cacheBust: false }
    );
  };

  const myPdfDocument = (
    <Document>
      <Page>
        <View>
          <Image src={downloadImage} cache={false} />
        </View>
      </Page>
    </Document>
  );

  function triggerDownload(url) {
    const a = document.createElement("a");
    a.href = url;
    a.download = "test.pdf";
    a.click();
  }

  const [pdfInstance, updatePdfInstance] = usePDF({});
  const [isDownloading, setIsDownloading] = useState(false);

  function initiateDownload() {
    setIsDownloading(true);
    updatePdfInstance(myPdfDocument);
  }

  useEffect(() => {
    if (isDownloading && pdfInstance.url) {
      triggerDownload(pdfInstance.url);
      setIsDownloading(false);
    }
  }, [isDownloading, pdfInstance.url]);

  return (
    <>
      <div className="test">Text</div>
      <button onClick={initiateDownload} disabled={isDownloading}>
        {isDownloading ? "Loading..." : "Download PDF"}
      </button>
    </>
  )
}