Slds-backdrop not covering the input fields on the screen

I am trying to add a lightning spinner, and I see the following behavior. The Input fields are not greying out when the spinner is on the screen

Below is the code :

CSS :

.loadingSpinner{
    position: fixed;
    top:50%;
    left: 50%;
    width: 80px;
    height: 80px;
}
.spinner-backdrop{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background-color: rgba(0, 0, 0, 0.5);
}

HTML :

<div class="loadingSpinner">
   <lightning-spinner alternative-text="Loading" size="medium"  ></lightning-spinner>
   <div class="spinner-backdrop"></div>
</div>

<div class="slds-col slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_6-of-12">
    <div class = "slds-container_large slds-container_center" style="padding-left: 1rem; padding-right: 1rem;">
        <div class="slds-grid slds-wrap">
          <div class="slds-col slds-size_1-of-1 slds-medium-size_6-of-12 slds-large-size_6-of-12 slds-p-horizontal_medium">
            <!--Field-->
            <span>
              <template  if:true={Options}>
                <abbr title="required" class="slds-required requiredCss">*</abbr>
                <lightning-combobox
                  name="Topic"
                  label="Topic"
                  value={TopicValue}
                  options={topicMap}
                  onchange={handleChange}
                ></lightning-combobox>
              </template>
              <template if:true={isError}>
                <span class="error">Complete this Field</span>
              </template>
            </span>
          </div>
        </div>
      </div>
</div>

How can I grey out the entire background?