Angular datatable dropdown value in table showing blank and value appears and disappears instantly when going to next paginated page

Question

The select option in the dropdown is showing blank value instead of selected value for each record. The foodCategories in child component is getting populated from parent component. It was working fine previously and only happened when migrated to Angular version 10.

Please note that form has also been properly initialized. What could be causing the issue?

template.html :

<table datatable  [dtOptions]="dtOptions">
  <thead>
    <tr>
      <th>Food Name</th>
      <th>Food Description</th>
      <th>Food Category</th>
    </tr>

  </thead>

  <tbody *ngIf="food?.length != 0" id="thedatatable">
    <tr *ngFor="let food of foodList" id="{{food.Guid}}" class="alternate-row">
      <td><label>{{food.Name}}</label></td>
      <td><label>{{food.Description}}</label></td>
      <td>
        <form class="table_form" [formGroup]="tableForm            (ngSubmit)="onTableFormSubmit(tableForm.value)">
          <select class="form-control" formControlName="foodCategorySelect"
          (change)="onTableFormSubmit(tableForm.value, food.Guid)">
          <option *ngFor="let foodCategory of foodCategories" [value]="foodCategory.Guid"> {{foodCategory.CategoryName}}</option>
           </select>
         </form>
    </td>
  </tr>
</tbody>

ts file :

@Input() foodCategories: any[];
 ngOnChanges(changes: import("@angular/core").SimpleChanges): void {
 if (changes.hasOwnProperty('foodCategories') &&    changes['foodCategories'].hasOwnProperty('currentValue')) {
        this.foodCategories = changes['foodCategories']['currentValue'];
        jQuery('.table').DataTable().ajax.reload();
    }
}

Value should reflect record value fetched from db.please help