A component that allows users to enter phone numbers with country codes.

## Usage

To use CountryPhoneInput, you need to import it in your React component and render it with the desired properties:

```jsx
import CountryPhoneInput from "./country-phone-input";

<CountryPhoneInput
  value={{ value: "", code: { countryCode: "", dialCode: "", name: "" } }}
  onChange={(value) => console.log(value)}
  disabled={false}
  disableCountryCode={false}
  required={false}
/>;
```

```sh
import React, { useState, useEffect, useRef } from "react";

import PhoneInput from "react-phone-input-2";

import "react-phone-input-2/lib/style.css";

import "./phone-input.scss";

export default function CountryPhoneInput({
  value,
  onChange,
  disabled,
  disableCountryCode,
  required,
}) {
  let inputRef = useRef();

  const [phone, setPhone] = useState();

  useEffect(() => {
    if (value && value.code && value.code.dialCode !== null) {
      setPhone(value.code.dialCode + value.value);

      setTimeout(() => {
        let selectedCountry = null;

        let selectedCode = null;

        if (
          inputRef.current &&
          inputRef.current.state &&
          inputRef.current.state.selectedCountry
        ) {
          selectedCountry = inputRef.current.state.selectedCountry;

          selectedCode = {
            countryCode: selectedCountry.iso2,
            dialCode: selectedCountry.dialCode,
            name: selectedCountry.name,
          };
        }

        let updatedValue = {
          value: value.code.dialCode + value.value,
          code: selectedCode,
        };

        onChange(updatedValue);
      }, 0);
    }
  }, []);

  function handleInput(value, code) {
    if (code.dialCode) {
      value = value.substring(code.dialCode.length);
    }
    // To get country code with phone number in parent component
    value = {
      value,
      code,
    };
    onChange(value);
  }

  return (
    <div className="phone-input">
      <PhoneInput
        ref={inputRef}
        country={disableCountryCode ? false : "in"}
        value={phone}
        onChange={handleInput}
        inputProps={{ required: required }}
        disabled={disabled}
      />
    </div>
  );
}

```