How do I remove the extra blank option coming in bootstrap dropdown?

See more:

bootstrap

AngularJs

Angular10

I have been using Angular as my UI framework. In my project , I had the need to define an enum. It goes as:

AlertSeverity.ts:
export enum AlertSeverity {
    Normal = 0,
    Warning = 50,
    Severe = 100,
}

and another enum file :

StatusChange.ts

export enum StatusChange{
    Broken = 1,
    Damaged = 2,
    WornOut = 3,
    PM = 4,
    FixedOrReplaced = 5,
    Inspected = 6,
    Other = 7
}

In my component file, I have used the enum like this :
Component.ts:

readonly statuses = [
        { id: AlertSeverity.Normal , text: 'Normal' },
        { id: AlertSeverity.Warning , text: 'Warning' },
        { id: AlertSeverity.Severe , text: 'Severe' },
    ];

 readonly reasons = [
        { id: StatusChange.Broken , text: 'Broken' },
        { id: StatusChange.Damaged , text: 'Damaged' },
        { id: StatusChange.WornOut , text: 'WornOut' },
        { id: StatusChange.PM , text: 'PM' },
        { id: StatusChange.FixedOrReplaced , text: 'FixedOrReplaced' },
        { id: StatusChange.Inspected , text: 'Inspected' },
        { id: StatusChange.Other , text: 'Other' },
    ];

 ngOnInit() {
        this.theForm = this.formBuilder.group({
            status: this. Status, //prepopulated value coming from parent component
            reason: ['', Validators.required],
            note: '',
            chainElongation: this.isChain === true ? this.elongation : 
                             this.chainElongation.default
        });
    }

And finally my template file is using these readonly properties like this :

  <div class="form-group col-auto">
    <label class="form-label" for="status">{{ 'AssetStatus' | translate }}</label>
      <select class="form-control form-control-sm" [id]="status" 
        formControlName="status" >
         <option *ngFor="let item of statuses" [id]="formatHtmlId(item.text)" 
           [ngValue]="item.id">{{item.text}}<option>
      </select>
  </div>

<div class="form-group col-auto">
   <label class="form-label" for = "reason">{{ 'Reason' | translate }}</label>
      <select class="form-control" id="reason" formControlName="reason" required>
         <option *ngFor="let item of reasons" id="formatHtmlId(item.text)" 
               [value]="item.id" >{{item.text | translate}}<option>
      </select>
</div>    

What is baffling me is that I am getting an empty option at the end of both the dropdowns. It is BootStrap that we are using but why I am getting an empty option at the end is something that I am not able to break. Does anyone have any suggesstion?

What I have tried:

I tried this way too,hoping to get some clues in ts files but I could not get anything.

reasonForTheStatus = StatusChange;
    enumKeys = [];

this.enumKeys = Object.keys(this.reasonForTheStatus).filter(value => !isNaN(Number(value)));

Hiding using CSS is also not an option for me.
I cannot even see anything in value because by default if I am selecting that blank option having no text then the form becomes invalid.