I have a Next.JS page that loads an external script. This external script modifies the DOM (Specifically places a div and an iframe on the page), it's a chat widget. The div that's added becomes the last child of the body, and I'm trying to grab it with document.body.lastChild. I'm running the logic in the onLoad property of Next's script component. Problem is, the timing seems to be off. It's grabbing the last child before the div is added, verified by logging.

Not sure why... I've tried running the logic in window onload listener, document onload listener, within useEffect, etc. Any ideas? I'm trying to grab the div so I can position it differently, for context. It renders in the bottom right of the screen by default.

<Script
     id="scriptid"
     src="scriptsource"
     onLoad={() => {
       functionFromScript();
       // my logic to grab the newly added div from the above function
       document.onload = () => {
       console.log('All loaded')
       const chatDiv = document.body.lastChild;
       console.log(chatDiv)
       chatDiv.style.position = 'relative';
     };
    }}>
</Script>