Bootstrap 4 Modal on Modal. How to show the grey background behind the top modal

// Function to open the first modal
function openProfileModal() {
  $('#profile_modal').modal('show');
}

// Function to open the second modal on top of the first
$('#m_suggest').click(function(e) {
  // Make sure the first modal is open (if not already)
  if (!$('#profile_modal').hasClass('show')) {
    $('#profile_modal').modal('show');
  }

  // Open the second modal
  $('#suggest_modal').modal('show');

  // Adjust z-index for modals and backdrops
  setTimeout(function() {
    // Set z-index for the first modal and its backdrop
    $('#profile_modal').css('z-index', 1050); // First modal
    $('.modal-backdrop').not(':last').css('z-index', 1040); // Backdrop for first modal

    // Set higher z-index for the second modal and its backdrop
    $('#suggest_modal').css('z-index', 1060); // Second modal
    $('.modal-backdrop:last').css('z-index', 1055); // Backdrop for second modal
  }, 0); // Timeout to make Bootstrap apply defaults first
});

// Reset z-index when the second modal is closed
$('#suggest_modal').on('hidden.bs.modal', function() {
  $('#profile_modal').css('z-index', ''); // Reset to default
  $('.modal-backdrop').css('z-index', ''); // Reset backdrop z-index
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"><button type="button" onclick="openProfileModal()">Open Profile Modal</button>
<!--begin::Modal-->

<div class="modal" id="profile_modal" tabindex="-1" aria-hidden="true" style="max-height: 1000px; overflow-y: auto;">
  <div class="modal-dialog  ">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title"><b><span id="firstname"></span>&nbsp;<span id="familyname1"></span></b></h2>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <input style="display:none;" type="text" class="form-control m-input" id="profileid" name="profileid"
                                value ="" >
        <div class="text-center">
          <button type="button" id="m_intro" class="btn btn-info">Suggest for Me&nbsp;<span id="spnlock"><i class="fa fa-lock"></i></span></button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" id="m_suggest" class="btn btn-primary">Send to Friend</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!--end::Modal-->

<!--begin::Modal style="border:black 2px solid;"-->
<div class="modal" id="suggest_modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header" style="background-color:#5bc0de;">
        <h4 class="modal-title">Suggest <span id="sfirstname"></span> for a Friend</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="suggest_close" name="suggest_close" >&times;</button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary col" id="m_send" name="m_send"  >Send</button>
      </div>
    </div>
  </div>
</div>
<!--end::Modal-->