How to use the html-to-image.toPng function in html-to-image

onClick={() => {
                  htmlToImage.toPng(this.diagramRef).then(function (dataUrl) {
                    var img = new Image();
                    img.src = dataUrl;
                    var link = document.createElement('a');
                    link.download = 'diagram.png';
                    link.href = dataUrl;
                    link.click();
                  })
                }}>
                Export PNG

onDownloadClick() {
    const size = this.state.downloadSizeSelected !== 4 ? this.state.downloadSize
      .find(d => d.value === this.state.downloadSizeSelected).name
      : Number(this.state.downloadSizeCustom);

    if (Number(size) <= 0) return;
    toPng(this.props.dataset.ref.current)
      .then(async dataUrl => {
        const newDataUri = await resizeImageURL(dataUrl, size);
        const a = document.createElement('a');
        a.href = newDataUri;
        a.download = `output-${moment().format('YYYYMMDDTHmmss')}.png`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      });
  }

onClick={(e) => {
                htmlToImage.toPng(props.diagramRef).then(function (dataUrl) {
                  var img = new Image();
                  img.src = dataUrl;
                  var link = document.createElement('a');
                  link.download = 'diagram.png';
                  link.href = dataUrl;
                  link.click();
                })
              }}>
              Export png