Display mindfusion diagram as a image

Question

I have a component which receives mindfusion diagram as a prop. I want to display this diagram as an image inside my component.

My component is as follows

import { Modal } from 'antd'
import * as Diagramming from '@mindfusion/diagramming'

interface Props {
  overviewDiagram: Diagramming.Diagram | undefined
}

const Overview = ({ overviewDiagram }: Props) => {
  return (
    <Modal open={true} onOk={() => {}} onCancel={() => {}}>
      {/* //TODO: show overviewDiagram as a image here */}
    </Modal>
  )
}

export default Overview

I understand that i need to first draw the component in the HTML Canvas and then convert it to a image. But struggling to get it to work. Any help is much appreciated.