() => {
  const [phoneNumber, setPhoneNumber] = React.useState('');
  const [validationResult, setValidationResult] = React.useState(null);
  const [parsedPhoneNumber, setParsedPhoneNumber] = React.useState(phoneNumber);

  const validatePhoneNumber = (phoneNumber, countryCode) => {
    // Generic regex for phone number validation. For real-world usage, consider using a library like libphonenumber-js
    const regex = /^\+?\d{1,4}?[-.\s]?\(?\d{1,3}?\)?[-.\s]?\d{1,4}[-.\s]?\d{1,4}[-.\s]?\d{1,9}$/;
    return regex.test(phoneNumber);
  };

  const handleOnChange = ({ value }) => {
    setPhoneNumber(value);
  };

  const handleOnBlur = (value, countryCode) => {
    const isValid = validatePhoneNumber(value, countryCode);
    setValidationResult(isValid ? 'valid' : 'invalid');

    if (isValid) {
      if (!value) {
        return;
      }

      setParsedPhoneNumber(parsePhone(value));

      log('Valid phone number:', value);
    } else {
      error('Invalid phone number:', value);
    }
  };

  return (
    <PhoneField
      id="phone-field-1"
      label={props.label}
      optionalLabel={props.optionalLabel}
      placeholder={props.placeholder}
      countryConfig={[
        { code: "+31", name: "Netherlands" },
        { code: "+32", name: "Belgium" },
        { code: "+49", name: "Germany" },
        { code: "+352", name: "Luxembourg" },
      ]}
      error={validationResult === 'invalid'}
      success={validationResult === 'valid'}
      value={parsedPhoneNumber}
      onBlur={({ value, inputValue, country }) => {
        handleOnBlur(value, country.code);
      }}
      onChange={({ value, inputValue, country }) => {
        handleOnChange(value, country.code);
      }}
      message={validationResult === 'invalid' ? 'Invalid phone number' : null}
    />
  )
};