Country input + phone number format (using i18n-iso-countries and libphonenumber-js)

PhoneInput.tsx

///////////////////////////////////////////////////////////////////////////////////////////////////
// https://codesandbox.io/s/hopeful-williams-ntsqk?file=/src/components/PhoneInput/index.tsx:0-2307
///////////////////////////////////////////////////////////////////////////////////////////////////

import React from "react";
import { Input, Select, Button } from "antd";
import countries, { getNames } from "i18n-iso-countries";
import {
  AsYouType,
  getCountryCallingCode,
  isSupportedCountry
} from "libphonenumber-js";
import { defaultData } from "./constants";
import {
  containerStyle,
  selectStyle,
  phoneInputStyle,
  buttonStyle
} from "./styles";

countries.registerLocale(require("i18n-iso-countries/langs/en.json"));

export default React.memo(() => {
  const [data, setData] = React.useState(defaultData);

  const {
    country: { alpha2, name },
    number,
    callingCode
  } = data;

  const isCountrySelected = Boolean(alpha2 && name);

  const handleCountryChange = React.useCallback(
    (_, { value: alpha2, children: name }) => {
      const country = { alpha2, name };

      const callingCode = getCountryCallingCode(alpha2);
      const number = `+${callingCode}`;

      setData({ country, number, callingCode });
    },
    []
  );

  const handlePhoneChange = React.useCallback(
    ({ target: { value } }) => {
      const formattedNumber = new AsYouType(alpha2).input(value);

      const regex = new RegExp(`^\\+${callingCode}`, "i");
      if (regex.test(value)) setData({ ...data, number: formattedNumber });
    },
    [data]
  );

  const handleReset = React.useCallback(() => setData(defaultData), []);
  return (
    <div style={containerStyle}>
      <Input.Group compact>
        <Select
          disabled={isCountrySelected}
          style={selectStyle}
          defaultValue="Please select a country"
          onChange={handleCountryChange}
        >
          {Object.entries(getNames("en", { select: "official" })).map(
            ([alpha2Key, countryName], index) => (
              <Select.Option
                disabled={!isSupportedCountry(alpha2Key)}
                key={`${alpha2Key}-${index}`}
                value={alpha2Key}
              >
                {countryName}
              </Select.Option>
            )
          )}
        </Select>
        <Input
          disabled={!isCountrySelected}
          style={phoneInputStyle}
          value={number}
          onChange={handlePhoneChange}
        />
      </Input.Group>
      <Button onClick={handleReset} style={buttonStyle}>
        Reset
      </Button>
    </div>
  );
});