how to convert react component to image

1import { exportComponentAsJPEG, exportComponentAsPDF, exportComponentAsPNG } from 'react-component-export-image';
2import React from 'react';
3
4class ComponentToPrint extends React.Component {
5 render() {
6   return <div>Hello World</div>;
7 }
8}
9export default class MyComponent extends React.Component {
10 constructor(props) {
11   super(props);
12   this.componentRef = React.createRef();
13 }
14
15 render() {
16   return (
17     <React.Fragment>
18       <ComponentToPrint ref={this.componentRef} />
19       <button onClick={() => exportComponentAsJPEG(this.componentRef)}>
20         Export As JPEG
21       </button>
22       <button onClick={() => exportComponentAsPDF(this.componentRef)}>
23         Export As PDF
24       </button>
25       <button onClick={() => exportComponentAsPNG(this.componentRef)}>
26         Export As PNG
27       </button>
28     </React.Fragment>
29   );
30 }
31}