Refactor input field into reuseable component

[ceghap]

this is current input code:

 <div className="mb-2">
  <label
    htmlFor="email"
    className={`mb-2 block text-sm font-medium ${
      errors.email
        ? "text-red-500 dark:text-red-600"
        : "text-gray-900 dark:text-white"
    }`}
  >
    Email address
  </label>
  <input
    type="email"
    id="email"
    className={`block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 ${
      errors.email
        ? "focus:border-red-500 focus:ring-red-500 dark:focus:border-red-500 dark:focus:ring-red-500"
        : "focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-500 dark:focus:ring-blue-500"
    }  dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 `}
    placeholder="john.doe@company.com"
    required
    {...register("email")}
  />
  {errors.email && (
    <p className="mt-2 text-sm text-red-600 dark:text-red-500">
      {errors.email?.message}
    </p>
  )}
</div>

please add support to react-hook-form