NgxIntlTelInputModule not working in Angular 14

Question

I am currently working on an Angular project, and I am using the NgxIntlTelInputModule library for handling international phone numbers. However, I have recently upgraded my project to Angular version 14, and I encountered issues with the NgxIntlTelInputModule not functioning as expected. Here's a simplified version of my component:

import { SearchCountryField, CountryISO } from "ngx-intl-tel-input";

ngOnInit(): void {
  this.phoneForm = this.fb.group({
    id: new FormControl(0),    
    phone: new FormControl('+91 9876543210', [Validators.required]),
  })
}

submit() {
  console.log(this.phoneForm.value)
}

edit(record: any) {
  this.phoneForm.patchValue({
    phone: record
  })
  console.log(record)
}

And here's the relevant HTML code:

<div style="margin: 50px">
      <form [formGroup]="phoneForm" (ngSubmit)=submit()>
        <div class="mb-2">
          <ngx-intl-tel-input [enableAutoCountrySelect]="true" [enablePlaceholder]="true"
                             [searchCountryFlag]="true" [searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]"
                             [selectFirstCountry]="false" [maxLength]="15" 
                             [phoneValidation]="true" [separateDialCode]="true" name="phone" formControlName="phone">
          </ngx-intl-tel-input>
        </div>
        <div class="mb-2">
          <button type="submit">submit</button>
          <br/>
          <button (click)="edit('+91 9876543210')">edit</button>
          <br/>
          <button (click)="reset()">Reset</button>
        </div>
      </form>     
    </div>

There are 2 separate fields, one for country code and another for local number. When I edit the phone number which was already saved with a country code and local number, the country code is displayed in both the fields (the country code field and local number field) but the country code should be displayed only in the country code field and not in the local number field. the package using are

"bootstrap": "^5.3.2",
"google-libphonenumber": "^3.2.33",
"intl-tel-input": "^16.0.5",
"jquery": "^3.7.1",
"ngx-bootstrap": "^11.0.2",
"ngx-intl-tel-input": "^3.2.0",

this is what is happening on edit which should not

this is what should happen on edit