Почему не работает валидация с кастомным input?

Question

[QnaTwitt]

Использую react-hook-form, и появилась проблема с своим кастомным инпутом, так как если сделать всё тоже самое на обычном то работает...

Если написать вот так всё нормально работает

<input {...register('firstName', { required: true })} />
        {errors.firstName && <p>This is required</p>}

А если вот так с использованием своего компонента Input не работает...

<Input
          {...register('firstName', { required: true, min: 0 })}
          onChange={(e: ChangeEvent<HTMLInputElement>) =>
            handleResumeData('firstName', e.target.value)
          }
        />
        {errors.firstName&& <p>This is required</p>}

Вот сам компонент Input

import React, {
  ChangeEventHandler,
  forwardRef,
  InputHTMLAttributes
} from 'react';
import Icon from '../icon/Icon';
import Style from './Input.module.scss';

enum InputType {
  text = 'text',
  number = 'number',
  checkbox = 'checkbox'
}

type InputTypeString = keyof typeof InputType;

interface IInput extends InputHTMLAttributes<HTMLInputElement> {
  type?: InputTypeString;
  placeholder?: string;
  onChange?: ChangeEventHandler;
  required?: boolean;
  autoFocus?: boolean;
  classes?: string;
  value?: any;
  defaultValue?: string | number;
  select?: boolean;
  readonly?: boolean;
  openSelect?: boolean;
  onClick?: () => void;
}

const Input = forwardRef<HTMLInputElement, IInput>(
  (
    {
      type,
      placeholder,
      onChange,
      required,
      autoFocus,
      classes,
      value,
      select,
      readonly,
      openSelect,
      onClick,
      defaultValue
    },
    ref
  ) => {
    const customClass = classes ? classes : '';
    return (
      <>
        {!select && type === 'checkbox' ? (
          <label className={`${Style.checkbox} ${customClass}`}>
            <input
              ref={ref}
              type={type}
              value={value}
              onClick={onClick}
              onChange={onChange}
              required={required}
              readOnly={readonly}
              autoFocus={autoFocus}
            />
            <span className={Style.checkboxFake}></span>
            {placeholder ? <p>{placeholder}</p> : null}
          </label>
        ) : null}
        {!select && type !== 'checkbox' ? (
          <label className={`form-control ${Style.input} ${customClass}`}>
            <input
              ref={ref}
              type={type}
              value={value}
              onClick={onClick}
              onChange={onChange}
              required={required}
              readOnly={readonly}
              autoFocus={autoFocus}
              placeholder={placeholder}
              defaultValue={defaultValue}
              className={`control -single`}
            />
          </label>
        ) : null}
        {select ? (
          <label
            className={`form-control ${Style.input} ${Style.select} ${
              openSelect ? Style.openSelect : ''
            }`}
          >
            <input
              ref={ref}
              type={type}
              value={value}
              onClick={onClick}
              onChange={onChange}
              readOnly={readonly}
              placeholder={placeholder}
              defaultValue={defaultValue}
              className={`control -single`}
            />
            <Icon id="a-down" width={7} height={6} />
          </label>
        ) : null}
      </>
    );
  }
);

Input.displayName = 'Input';

export default Input;

Подскажите пожалуйста почему может не работать...