Как использовать props в forwardRef компоненте?

Question

[chvertkos]

Я пытаюсь валидировать форму с помощью react-hook-form по туториалу.
И использую TypeScript
У меня есть компонент Input

import * as React from 'react';
import  "./inputStyles.css";


export const Input =  React.forwardRef<HTMLInputElement>((props,ref) => {
   return(
    <div className="inputbox">
      <label htmlFor="input">Sign in</label>
      <input ref={ref} className="input" {...props} id="input" ></input>
    </div>
   )
})

Что значит и как использовать {...props} далее?

Например при создании формы

export function AutarizationLayout () {


   const {register, handleSubmit, formState: {errors}} = useForm(
       {
       mode: 'onBlur'
    });
    return(
        <div className="container">
            <div className="auth__page">
                <div className="auth__form">
                    <Form>
                        <h1 className="auth__title">Sign In</h1>
                        <Input {...register('fiieldName')} type="text" className="login"  auth="Login"/>
                        <Input {...register('fiieldName')} type="password" className="password" auth="Password"/>
                        <Btn auth="Sign in"/> 
                        <p>Not a member yet?<LinkItem link="Sign Up"></LinkItem></p>
                    </Form>
                </div>
                <div className="main__image">
                    <img src={layer} alt="layer 1" />
                </div>
            </div>
        </div>
    )

я не могу указать атрибут type,className и тд у input. Выдает следующую ошибку

Тип

"{ type: string; className: string; auth: string; onChange: ChangeHandler; onBlur: ChangeHandler; ref: RefCallBack; name: string; min?: string | number | undefined; ... 5 more ...; disabled?: boolean | undefined; }" не может быть назначен для типа "IntrinsicAttributes & RefAttributes<HTMLInputElement>"

.
Свойство "type" не существует в типе

"IntrinsicAttributes & RefAttributes<HTMLInputElement>".

И как при этом использовать свои пропсы?

Answer 1

[Александр]

React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(...);