SingUpFormindex.tsx

<TextInput
            type="text"
            id="First name"
            placeholder="Enter first name"
            {...register('firstName')}
    />

TextInput.ts

const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, TextInputProps>(
  ({ id, type, placeholder, required, value, defaultValue, disabled, onChange, ...register }, ref) => {
    return (
      <input
        className={`block w-full rounded-lg border border-gray-300 p-3 text-text focus:border-blue-500 focus:ring-blue-500 ${
          disabled && 'bg-disabled'
        }`}
        ref={ref as React.ForwardedRef<HTMLInputElement>}
        onChange={onChange}
        value={value}
        type={type}
        id={id}
        placeholder={placeholder}
        required={required}
        disabled={disabled}
        defaultValue={defaultValue}
        {...register}
      />
    );
  },
);

const TextInput = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, TextInputProps>(
  ({ id, type, placeholder, required, value, defaultValue, disabled, onChange, register }, ref) => { 
    return (
      <input
        className={`block w-full rounded-lg border border-gray-300 p-3 text-text focus:border-blue-500 focus:ring-blue-500 ${
          disabled && 'bg-disabled'
        }`}
        ref={ref as React.ForwardedRef<HTMLInputElement>}
        onChange={onChange}
        value={value}
        type={type}
        id={id}
        placeholder={placeholder}
        required={required}
        disabled={disabled}
        defaultValue={defaultValue}
        {...register}
      />
    );
  },
);

<TextInput
    type="text"
    id="First name"
    placeholder="Enter first name"
    register={...register('firstName')}
/>