Modal backdrop issue in browser fullscreen mode

I have the following situation:

i have a div element (a mapbox map) that can be displayed in browser fullscreeen mode with a Bootstrap modal inside:

<div id="map-container">
...
  <div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        ....
      </div>
    </div>
  </div>
</div>

When the map is in full screen mode and I open the modal, I can see the modal, but the backdrop appears behind the map and is therefore not visible. Everything works fine when the map is not in full screen mode.

I found out that when the modal is opened, the backdrop element is added at the end before the body close tag:

<div id="map-container">
...
  <div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        ....
      </div>
    </div>
  </div>

</div>
....
<div class="modal-backdrop fade show"></div> <!-- ## BEHIND MAP ELEMENT ## -->
</body>

How can i make bootstrap to place the backdrop element inside the map div??

<div id="map-container">
...
  <div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        ....
      </div>
    </div>
  </div>
  
  <div class="modal-backdrop fade show"></div> <!-- ## THIS SHOULD BE PLACED HERE ## -->

</div>

Thank you.