Create and download image of a react component without rendering it

My use case is simple. I have a react component that takes some props and renders something. Now I want to download it as an image without rendering it basically not showing it to the user. I have tried html2canvas and react-component-export-image. In both of these libraries, I managed to capture the screenshot but both of them required me to render the component.

I used code from this page for react-component-export-image https://www.npmjs.com/package/react-component-export-image

Suppose the following is my component

const Component1 = ({ reference }) => {
  return (
    <div ref={reference} >
      <div className="share-cause-header">
       Some header stuff
      </div>
      <div className="share-cause-body">
       some body stuff
      </div>
      <div className="share-cause-footer">
        some footer stuff
      </div>
    </div>
  );
};

Now on another Component2, I want to send some props to my Component1 and then download that component as an image without showing anything to the user. A user should only see the download button and the downloaded image

const Component2 = () => {
   const shareButtonImageDownload = (e) => {
      e.stopPropagation();
      console.log("Hi there");
   };
      return (
        <div >
         <button onClick={shareButtonImageDownload } ></button>
        </div>
      );
    }; 

If the component is not visible, then you can't take a screenshot of it. But you can bring them out of the visible view, like this:

https://codesandbox.io/embed/laughing-http-w3ndr?fontsize=14&hidenavigation=1&theme=dark

import {
  exportComponentAsJPEG,
  exportComponentAsPDF,
  exportComponentAsPNG
} from "react-component-export-image";
import React, { useRef } from "react";

const ComponentToPrint = React.forwardRef((props, ref) => (
  <div ref={ref} style={{ marginTop: "-50px" }}>
    <div className="share-cause-header">Some header stuff</div>
    <div className="share-cause-body">some body stuff</div>
    <div className="share-cause-footer">some footer stuff</div>
  </div>
));

const MyComponent = () => {
  const componentRef = useRef();

  return (
    <React.Fragment>
      <ComponentToPrint ref={componentRef} />
      <button onClick={() => exportComponentAsJPEG(componentRef)}>
        Export As JPEG
      </button>
      <button onClick={() => exportComponentAsPDF(componentRef)}>
        Export As PDF
      </button>
      <button onClick={() => exportComponentAsPNG(componentRef)}>
        Export As PNG
      </button>
    </React.Fragment>
  );
};

export default MyComponent;