How to convert React Component with dynamic states to html

I'm trying to convert a react component to html, so I can send it to a .pdf generator. There's many posts on generating html from components, but none address the case where the data inside the component is dynamic.

here's my best attempt:

//createHtml.js

//imports omitted
export function someOtherComponent(){

function createHtml(){
 return renderToStaticMarkup(
          <dataProvider>  
 //doesnt work, it creates a new instance of dataProvider with no mydata
            <myComponent />
          </dataProvider>
        )
}
return (    <someButton onclick=createHtml>   )
}

It shows nothing. This is because there's no context provider (I think). mydata doesn't exist.
I tried rendering the context provider but that creates a new instance of the provider. mydata doesn't exist there. Its only in the original provider.

Anyone have any ideas? I'd hate to delete all these components and generate an html string using vanilla javascript.

Any help is appreciated.

Here's my components and stuff in case it helps (pseudocode, obviously):

//myComponent.js

import {getData} from 'dataProvider'
export function myComponent(props) {
    const { mydata } = getData();
    //just display some dynamic data
    return (    <div>    {mydata}    </div>    )
}

heres the context provider:

//dataProvider.js
const dataContext = createContext();

export default function datatProvider({ children }) {
  const [mydata, setData] = useState([]);
  const { Provider } = dataContext;
  return <Provider value={mydata}>{children}</Provider>;
}
export function getData() {
  return useContext(dataContext);
}

and then I have some startup code that populates mydata

//startup.js
import {getData} from 'dataProvider'
function startup(){
     const { setData } = getData();
     //load data from DB
     setData(res.data);
    
}

I've ommited all the react imports and stuff, for clarity.