react-hook-formで自作子コンポーネント（汎用型）を作成

import { SubmitHandler, useForm } from 'react-hook-form';

import { InputItemComponent } from './InputItemComponent';

export const InputBoardComponent = () => {
  type InputFormPrideContentType = {
    title: string;
    serviceName: string;
    infoName: string;
  };
  const { handleSubmit, control, reset } = useForm<InputFormPrideContentType>({
    defaultValues: {
      title: '',
      serviceName: '',
      infoName: '',
    },
  });

  const onSubmit: SubmitHandler<InputFormPrideContentType> = (data: InputFormPrideContentType) => {
    console.log(data);
    reset();
  };
  return (
    <>
      <form
        onSubmit={handleSubmit(onSubmit)}
        className="flex w-full  max-w-xl flex-col gap-5 rounded p-4 shadow-2xl"
      >
        <InputItemComponent
          name={'title'}
          control={control}
          rules={{
            required: { value: true, message: 'アピールは書いてね♡' },
            maxLength: { value: 20, message: '文字数は20文字以内です。' },
          }}
          label="アピールポイント"
          validation="20文字以内"
        />
        <InputItemComponent
          name={'serviceName'}
          control={control}
          rules={{
            required: { value: true, message: 'これは難しい' },
            maxLength: { value: 20, message: '文字数は10文字以内です。' },
          }}
          label="対象サービス"
          validation="10文字以内"
        />
        <InputItemComponent
          name={'infoName'}
          control={control}
          label="顧客名・社内検証等"
          rules={{
            required: { value: true, message: 'これは埋めときましょう' },
            maxLength: { value: 10, message: '文字数は10文字以内です。' },
          }}
          validation="10文字以内"
        />
        <button
          type={'submit'}
          className="flex items-center justify-center border-2 border-gray py-3 px-8 text-lg"
        >
          投稿
        </button>
      </form>
    </>
  );
};

import { FieldValues, useController, UseControllerProps } from 'react-hook-form';

type LabelProps = {
  label: string;
  validation: string;
};

type InputItemComponentProps<T extends FieldValues> = UseControllerProps<T> & LabelProps;

export const InputItemComponent = <T extends FieldValues>(props: InputItemComponentProps<T>) => {
  const { label, validation, name, control, rules } = props;
  const { field, fieldState } = useController<T>({ name, control, rules });
  const { error } = fieldState;

  return (
    <>
      <div className="flex w-full flex-col">
        <div className="flex flex-row justify-between text-lg text-gray">
          <span>{label}</span>
          <span>{validation}</span>
        </div>
        <input type="text" {...field} className="border border-gray py-1 px-2 text-lg" />
        <span className="h-4 w-full text-xs text-red-600">{error ? error.message : ''}</span>
      </div>
    </>
  );
};