Unable to append a div to a div in Google Calendar's DOM

Question

When in Week View, in https://calendar.google.com/*'s DOM there is the div below:

<div role="gridcell" tabindex="-1" jsname="RjPD4e" aria-labelledby="tsc-0" data-column-index="0" data-datekey="27390" data-principal-ids="cnlsYW5kQHN0YWNrYml0LmNvbQ" class="YvjgZe"></div>

In the Content Scripts file in my manifest v3 chrome extension, the expected behavior of the code snippet below is to select the mainDiv above and append newDiv to it.

const mainDiv = document.querySelector('[aria-labelledby="tsc-0"]');

const newDiv = document.createElement('div');
newDiv.innerHTML = 'Hello World';

mainDiv.appendChild(newDiv);
console.log('mainDiv', mainDiv);

The behavior occuring is that mainDiv is selected, but the newDiv is not appended.

Why and how can I append a div to mainDiv?