Blur event on pre-filled input makes the control invalid

I have a form where I'm using this component for taking user's phone number. But, when I use this form for updating existing user details this is not working. All other values are pre-filled for user to update. I'm using a full object to populate the value for phone number instead of just the E.164 format string.

The function to convert string to phone number object looks like this:

getIntlTelInputPhoneNumber(phoneNumberStr: string) {
  const phoneNumber = phoneUtil.parseAndKeepRawInput(phoneNumberStr);

  const phone = {
    countryCode: phoneUtil.getRegionCodeForNumber(phoneNumber) || 'US',
    dialCode: '+' + phoneNumber.getCountryCode(),
    e164Number: phoneUtil.format(phoneNumber, PNF.E164),
    internationalNumber: phoneUtil.format(phoneNumber, PNF.INTERNATIONAL),
    nationalNumber: phoneUtil.format(phoneNumber, PNF.NATIONAL),
    number: phoneNumber.getNationalNumber(),
  };

  return phone;
}

And I use this function to patch value to phoneNumber control

// ...
if (this.user.phoneNumber) {
    const phone = this.getIntlTelInputPhoneNumber(this.user.phoneNumber);
    // this is used for setting the dynamic country flag from phone number
    this.selectedCountry = phone.countryCode.toLowerCase() as CountryISO;  
    this.userForm.get('phoneNumber')?.patchValue(phone);
    this.phoneNumberLoaded = true;
    // cd is ChangeDetectorRef
    this.cd.detectChanges();
  }
// ...

This shows the control filled with value

Now, when I just focus on the element and leave the input without modifying anything, I'm getting the error of invalid phone number.

Env:

"@angular/*": "~13.3.0",
"google-libphonenumber": "^3.2.30",
"intl-tel-input": "^17.0.3",
"ngx-intl-tel-input": "^3.2.0",

webcat12345 / ngx-intl-tel-input

Blur event on pre-filled input makes the control invalid #468