Infinite scroll not working when mat-option is added inside of a div element

[Khushbu-2112]

Below is how I'm using infinite scroll with mat-select:

I've checked and found that when mat-options are put inside of div onscroll stops working.

<div class="general-input-block filter">
    <label>Amenities</label>
    <mat-select msInfiniteScroll (infiniteScroll)="loadAmenities()" 
      panelClass="general-select" [(value)]="selectedAmenities" class="input"
      placeholder="Select Amenity" (selectionChange)="loadReservations();" multiple>
       <div class="select-scroll-block select-scroll-block-amenity select-options-block checkbox-dropdown">
        <mat-option [value]="amenity.id" *ngFor="let amenity of amenities">
          {{ amenity.name }}
        </mat-option>
      </div>
    </mat-select>
  </div>