Fetch API .then() doesn’t get element innerHTML in time to write to it. Inconsistent behavior [duplicate]

I have several HTML file I am dynamically inserting into the DOM with JS. However, all 3 work 50% while 1, 2 or all three randomly fail with a “TypeError: Cannot set properties of null (setting ‘innerHTML’)”.

Ideas?

loadComponent("targetDiv1","htmlFile1.html)
loadComponent("targetDiv2","htmlFile2.html)
loadComponent("targetDiv3","htmlFile3.html)

function loadComponent(targetElementID, htmlFile) {
    fetch(htmlFile)
        .then((response) => {
            return response.text();
        })
        .then((response) => {
            document.querySelector("#" + targetElementID).innerHTML = response;
            return response;
        })
        .catch((error) => {
            console.log(error, targetElementID, htmlFile);
        });
}

It acts as if the target div ID is not retrieved in time to write the html contents to it.