Warning: “Blocked aria-hidden on an element because its descendant retained focus” in Angular modal

I’m encountering a warning in my Angular application that states:

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead.

I’m using a modal dialog created with the Angular Bootstrap (ng-bootstrap) library. Here’s a simplified version of the relevant code:

<div class="modal-header">
  <h4 class="modal-title">Serial Number</h4>
  <button type="button" class="btn-close" aria-label="Close" aria-label="Close" (click)="popupClose(false)">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Issue:
The warning indicates that an element with aria-hidden is blocking focus from its descendant elements. I want to ensure that my modal is accessible and does not cause issues for assistive technology users.

I considered using the inert attribute as suggested, but I’m unsure how to implement it in this context.
I’ve looked through the ng-bootstrap documentation and found no specific guidance on this warning.