Styles on elements inside modal-body aren't being applied

Question

If I show the modal as written below and without tampering with it after releasing and running my web application, the divLocation style is applied to the "Germany" text, e.g. it gets a red background.

If I press a button, remove <div class="divLocation">Germany</div> and add instead <div class="divLocation">Belgium</div> before showing my modal, no red background is being added (although Chrome shows that the HTML is the same).

What am I missing?

var wndLocationsDiv = document.getElementById("wndLocations").getElementsByClassName("modal-body")[0];

var divContainerCurrentLocation = document.createElement("div");
divContainerCurrentLocation.classList.add("divLocation");

divContainerCurrentLocation.innerHTML = 'Belgium';

wndLocationsDiv.appendChild(divContainerCurrentLocation);

html,
body {
  min-height: 100vh;
}

.divLocation {
  background: red !important;
  border-radius: 34px !important;
  border: 1px solid !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="modal fade show" id="wndLocations" tabindex="-1" role="dialog" aria-labelledby="wndLocationsCenterTitle" aria-hidden="true" style="display: block;">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="wndLocationsLongTitle">Locations</h5>
      </div>
      
      <div class="modal-body">
        <div class="divLocation">Germany</div>
      </div>
      
      <div class="modal-footer modalFooter">
        <button type="button" class="btn btn-primary primaryActionBackground" data-bs-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

<div id="bingMap" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

The thing is that the snippet above works. How can I find out what else is intervening and preventing the update with "Belgium" at runtime?

UPDATE I added a div to the end of the page, which exists in my (more extended) project and envelops a Bing map. I've already had some problems with the map "interfering" with my layout, could that be a factor?