display a plotly html file as image inside reactstrap card

Question

Currently my website displays plots with info using reactstrap cards. Recently, I found out that instead of saving plotly graphs to png/pdf, saving as html is much faster to process, so I wanted to move to html instead. The old version of the card looks like this:

const Plot = ({name, pngUri, pdfUri, search, display, onHover}) => {
  return (
    <Card className={cx(plotSty, display ? null : hidden)} onMouseEnter={onHover}>
      <a href={pdfUri} target="_blank">
        <CardHeader>{hlSearch(name, search)}</CardHeader>
        <CardImg src={pngUri} />
      </a>
    </Card>
  );
};

I was able to get it to display if I get rid of <Card> and instead use <iframe> but that means I lose the ability to search through plots and set some of them to not display on the page.

Is there a way to display the html plots while still keeping the card functionalities? Is there perhaps a different library I can use for this?

The plotly graphs are made with plotly in python backend.

example of plotly html files can be found here: https://plotly.com/python/interactive-html-export/