import { useForm, Controller } from 'react-hook-form'
import PhoneInput, { isValidPhoneNumber } from 'react-phone-number-input'
import 'react-phone-number-input/style.css'
const MyForm = () => {
const {
handleSubmit,
formState: { errors },
control,
} = useForm()
const onSubmit = (data) => {
console.log(data)
}
return (
<form onSubmit={handleSubmit(onSubmit)} className="user-info-form">
<div>
<label htmlFor="phone-input">Phone Number</label>
<Controller
name="phone-input"
control={control}
rules={{ required: true }}
render={({ field: { onChange, value } }) => (
<PhoneInput
value={value}
onChange={onChange}
defaultCountry="TH"
id="phone-input"
/>
)}
/>
{errors.phone && <p className="error-message">Invalid Phone</p>}
</div>
</form>
)
}
export default MyForm