React-pdf/renderer not uploading image from Plotly

Question

I have an image from base64 data string I am generating from Plotly that I want to include as the src attribute in the Image tag. I am able to get the base64 data string but when I render the Image tag nothing shows up.

This is the base64 string that is saved in the variable 'url':

data:image/png;base64,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

This is my code:

import React, { useState, Fragment  }  from 'react';
import { Image, Document, Page, Text, View, StyleSheet, PDFViewer } from '@react-pdf/renderer';
import Plot from 'react-plotly.js';
import * as Plotly from "plotly.js";

function Analyze(props:{items:string; analysisResults:any; recievedJson:boolean}) {
    const [url, setUrl] = useState('');
    const [isPngDownload, setDownloadPng] = useState(false);
    const plot = React.createElement(Plot,
            { data: [
                {
                    x: [1, 2, 3, 4],
                    y: [1, 2, 3, 4],
                    type: 'scatter',
                    mode: 'lines+markers',
                    marker: {color: '#add8e6'},
                },
                ]
            , layout: { width: 320, height: 240, title: 'Calibration Curve'}
            ,divId: "calCurve"
            })

    const downloadPdf = async() => {
            const url = await Plotly.toImage("calCurve",  {format: 'png', width: 320, height: 240});
            setUrl(url);
            setDownloadPng(true)
            console.log(url)
        }
        
    const pdfButton =  React.createElement("button",
            {
              className: "panel-btn-close hide-btn",
              onClick: downloadPdf
            },
            "Download PDF")

    return (
        <div className="plotly_div">
            <div>
                {plot}
            </div>
            <br />
            {pdfButton}
            {isPngDownload &&
                <Fragment>
                    <PDFViewer width="1000" height="600">
                        <Image src={url}/>
                    </PDFViewer>
                </Fragment>
            }
        </div>

}

According to the console.log in the downloadPdf function, I am definitely getting back the base64 value (see above) and it is being set to the url variable. So later when I select the download Pdf button it should have everything it needs to render the image.

I looked at this stackoverflow question as it appears to be the exact solution I'm looking for but for some reason it is not working for me (React-pdf show image from base64 data string)

I'm wondering if maybe there is an issue with the version of react-pdf and plotly I am using. For reference:

"dependencies": {
    **"@react-pdf/renderer": "^3.1.12",**
    "assert": "^2.0.0",
    "browserify-zlib": "^0.2.0",
    "buffer": "^6.0.3",
    "concurrently": "^8.0.1",
    "cross-env": "^7.0.3",
    "electron": "^24.3.1",
    "electron-cgi": "^1.0.6",
    **"plotly.js": "^2.24.2",**
    "process": "^0.11.10",
    "react": "^18.2.0",
    "react-csv": "^2.2.2",
    "react-dom": "^18.2.0",
    **"react-plotly.js": "^2.6.0",**
    "react-router-dom": "^6.11.2",
    "react-scripts": "^5.0.1",
    "stream": "^0.0.2",
    "stream-browserify": "^3.0.0",
    "util": "^0.12.5",
    "wait-on": "^7.0.1"
  },

If anyone could please help me understand what I'm missing I would greatly appreciate it. Thanks!