In my react.js web app, I launch a react bootstrap modal menu from a google map and it displays correctly. However, when I display the google map in fullscreen mode, the react bootstrap modal menu does not display. The information I've found so far, indicates that the modal menu needs to be inside of the maps fullscreen div and that the z-index will not fix this. I've also found 2 working samples ([sample1][1], [sample2][2]), but I can't get them to work for my particular implementation using react. In my implementation, the modal menu is a component that I create using the bootstrap modal component. Here is a high level view of the code:

import {GoogleMap, LoadScript, Marker} from "@react-google-maps/api";
<LoadScript>
   <GoogleMap>
   </GoogleMap>
   {MenuModalShow ? (
     <MenuModal
       id="MenuModal"
       show={MenuModalShow}
       onHide={() => setMenuModalShow(false)}
       menu_modal_list={MenuModalList}
       menu_modal_heading={MenuModalHeading}
       menu_model_image={MenuModalImage}
       menu_modal_place={MenuModalPlace}
     />
   ) : null}
</LoadScript>


  [1]: https://stackoverflow.com/questions/47247907/google-map-in-fullscreen-with-bootstrap-modal
  [2]: https://stackoverflow.com/questions/60738875/open-a-bootstrap-modal-over-leaftlet-in-fullscreen