React useEffect not running after all DOM has loaded

I have a react Application where I am trying to add the AWS Chat Widget.

It is working but I want to add some additional styling to the launch icon which doesnt seem to be their out of the box – https://docs.aws.amazon.com/connect/latest/adminguide/customize-widget-launch.html

I want too add a tool tip as I have mocked up in the image:

This is the code I have added to useEffect method:

  useEffect(() => {
    const widgetEle =  document.getElementById('amazon-connect-chat-widget');
    debugger;
    if (widgetEle) {
      widgetEle.innerHTML = '<span class="tooltip-text" id="left">Chat with us!<button id="chatToolTipClose" type="button" class="close">x</button></span>';
    }
 }, []);

I thought this should only run after the DOM has fully rendered – but on my debugger the widgetEle is always null. But when I run the exit the debugger the default google chat icon is displayed – and when I inspect the element I can see there is no typo in the id – it is exactly what I specify.

Is there something I am missing?