Ok, this question sounds weird, but hear me out:

I am ussing @uppy/react, and it offers some buttons to trigger cloud file provider uploads (Google Drive, DropBox, etc)

I can get those buttons with document.querySelector.

I want to render a custom component inside one of them, but I can't figure out how! I tried ReactDom's createPortal and render methods in a few different ways but none of them work.

I know this is very anti-pattern, but I haven't managed to talk my designer out of the idea yet...

Here is what I'm currently trying:

const GDriveToggle = () => {
  const el = document.querySelector('[data-cy="GoogleDrive"]');

  const node = document.createElement("div") // I have also tried React.createElement here

  useEffect(() => {
    if (el && node) {
      ReactDOM.createPortal(<div>Foo</div>, node); // I have also tried render() here
      el?.appendChild(node)

      console.log(el) // el has node inside of it
      console.log(node) // node has the foo text inside of it

      // but none show up inside the button on the page, I'm guessing it gets lost on any 
         // rerender?
    }
  }, [el, node]);

  return null;
};