I have created an HTML file with Python and Jupyter Notebook which contains graphs made with Plotly. When I open up the HTML file in my browser I can see the graphs fine.

The problem arises when I try to insert this HTML file in my React app using dangerouslySetInnerHTML. I can see that for each Jupyter code cell which holds the Plotly graph a div is being generated as follows:

<div class="jp-Cell jp-CodeCell jp-Notebook-cell  jp-mod-noInput">
 <div class="jp-Cell-outputWrapper">
  <div class="jp-OutputArea jp-Cell-outputArea">
   <div class="jp-OutputArea-child">
    <div data-mime-type="text/html" class="jp-RenderedHTMLCommon jp-RenderedHTML jp-OutputArea-output">
     <div>
      <div style="height:500px; width:800px;" class="plotly-graph-div" id="d8f872f4-8de2-4892-b3fb-842a376f21ee">
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

But there is no content rendered in it. I am currently trying to do this with the following code:

function Report(props) {
    return (
        <div>
            <div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(props.report)}} />        
        </div>
    );
  }

Any ideas on why this might be happening? Is there any alternative to dangerouslySetInnerHTML? I have not been able to find a solution to this problem anywhere.

Thanks!