PDFViewer not automatically rendering content

[emmanuel-londono]

How can I have the <PDFViewer/> re-render whenever I may changes to <Document/> ?

I'm currently using zustand as a state manager but I haven't been able to make the iframe re-render after a change to the codebase after clicking the rerender button. I'll also opt for using a no-button approach for the iframe rendering automatically.
Would I use the usePDF hook for this? I've looked at the docs but haven't been able to implement the update() function properly.

Any guidance would be appreciated, even answers with native react state management instead of Zustand!

import React from "react";
import { Button } from "@mui/material";
import RefreshIcon from "@mui/icons-material/Refresh";
import { PDFViewer, usePDF } from "@react-pdf/renderer";
import { MyDocument } from "~/pages/react-render-test";


export const PDFContainer = () => {
    const pdfBlob = useEventReportStore((store) => store.pdfBlob);
    const setPdfBlob = useEventReportStore((store) => store.setPdfBlob);
    const [instance, update] = usePDF({ document: <MyDocument /> });
    const toggleRenderPDF = () => {
        const blob = instance.blob;
        console.log(blob);
        setPdfBlob(blob);
    };
    return (
        <>
            <Button onClick={toggleRenderPDF}>
                <RefreshIcon />
                Re-render
            </Button>
            {pdfBlob ? (
                <PDFViewer width="1000px" height="1200px">
                    <MyDocument />
                </PDFViewer>
            ) : (
                <div>Loading PDF...</div>
            )}
        </>
    );
};

export default PDFContainer;

React Version 18.2.0