How to get Significant number with Mask

[IvanNavin]

I am working on a design that includes a select dropdown for country codes. I obtain the codes using the following approach:

const codes = getSupportedCallingCodes()
  .map((code) => `+${code}`)
  .sort((a, b) => a.localeCompare(b));

Subsequently, I receive a phone number, for example: "+380987654321". I pass this number to parsePhoneNumber:
const pn = parsePhoneNumber(value);
Then, I propagate the necessary values into the code select and the input field:

if (pn.countryCode) {
  setCode(`+${pn.countryCode}`);
}
if (pn.number?.significant) {
  setInputValue(pn.number.significant);
}

My objective is to have the country code in the select as "+380" and the remaining part of the number in the input, where I am utilizing significant.

Question: Do you have a ready solution or recommendations on how to implement the significant part with a mask?

[grantila]

If you have a valid phonenumber, you can filter by the countryCode field, which is the 380 in your example.