ngx-dropzone hover flickering issue

[rpragesh]

https://user-images.githubusercontent.com/33778579/217247490-466e9f8b-dcc2-48e1-9246-4ffade81524a.mp4

adding video to explain my issue.

I have added dropzone

<ngx-dropzone class="dropzone" #dropzonde (change)="onSelect($event)" [accept]="allExtentions" [multiple]="true"
        [ngClass]="{'dropped-files':browsedFiles?.length > 0}">
        <ngx-dropzone-label>
          <img class="empty-mountain" src="assets/icons/empty states/mountain.svg" alt="">
          <span class="input-label">{{ "ADD_DOCUMENT_DRAG_AND_DROP_FILES" | translate }}</span>
          <button igxButton="outlined" class="secondary-button" igxRipple="white">{{'DMS_ADD_DOCUMENT_BROWSE' |
            translate}}</button>
          <div class="dropping-box">
            <img class="drag-drop-upload-icon" src="assets/icons/internet/cloud_download.svg" alt="">
            <div class="drag-drop-upload-header-text">{{'DMS_DRAG_DROP_BLOCK_YOU_CAN_DROP_IT_NOW' | translate}}</div>
            <div class="drag-drop-upload-text">{{'DMS_DRAG_DROP_BLOCK_YOU_CAN_DROP_IT_NOW_SUB_TEXT' | translate}}</div>
          </div>
        </ngx-dropzone-label>
      </ngx-dropzone>

.dropzone {
      display: flex;
      align-items: center;
      height: 250px;
      background: var(--white);
      cursor: pointer;
      color: var(--g-600-comet);
      border: 2px dashed var(--g-500-granite);
      border-radius: 5px;
      font-size: var(--font-size-16);
      justify-content: center;
      ngx-dropzone-label {
        margin: 0px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    .ngx-dz-hovered {
      background-color: rgba(0, 65, 91, 0.7);

      .input-label {
        color: var(--w-100-snow)
      }

      .empty-mountain {
        filter: var(--white-filter-icon);
      }

      .dropping-box {
        display: block !important;
        z-index: 0;
      }

      .drag-drop-upload-icon {
        width: 95px;
        height: 95px;
        filter: var(--white-filter-icon);
      }

      .drag-drop-upload-text,
      .drag-drop-upload-header-text {
        line-height: 24px;
        letter-spacing: 0.15px;
        color: var(--white);
        padding-top: 1px;
      }

      .drag-drop-upload-header-text {
        font-size: var(--font-size-16);
        font-family: var(--font-family-semi-bold);
      }

      .drag-drop-upload-text {
        font-size: var(--font-size-14);
        font-family: var(--font-family-regular);
      }

      .igx-button,
      .input-label,
      .empty-mountain {
        display: none;
      }
    }

any idea why it is flickring on hover??