IonInput getting error with React Hook Form

Try to use a IonInput on a project.

const { register, handleSubmit, formState: { errors } } = useForm({
        
        mode: "onTouched",
        reValidateMode: "onChange"
    });

    const fields = [
        {
            label: "Firstname",
            required: true,
            requiredOptions: {

                maxLength: 10
            },
            props: {
                
                name: "firstname",
                type: "text",
                placeholder: "Enter a username"
            }
        },

        {
            label: "Age",
            required: true,
            requiredOptions: {

                min: 18,
                max: 99
            },
            props: {
                
                name: "age",
                type: "number",
                inputmode: "numeric",
                placeholder: "Enter your age"
            }
        }
    ];

    console.log(errors);
    
    const onSubmit = (data : any) => {
        
        console.log(data);
    }

    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>React Hook Form</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <IonHeader collapse="condense">
                    <IonToolbar>
                        <IonTitle size="large">React Hook Form</IonTitle>
                    </IonToolbar>
                </IonHeader>

                <IonCardSubtitle className="ion-text-center ion-margin">An example using React Hook Form</IonCardSubtitle>

                <form onSubmit={ handleSubmit(onSubmit) }>

                    { fields.map((field, index) => {

                        const { label, required, requiredOptions, props } = field;

                        return (
                            <IonItem key={ `form_field_${ index }` } lines="full">

                                <>
                                    <IonLabel position="fixed">{ label }</IonLabel>
                                    <IonInput { ...props } { ...register(props.name, { required, ...requiredOptions }) } />
                                </>
                                { required && errors[props.name] && <IonIcon icon={ alertCircleOutline } color="danger" /> }
                            </IonItem>
                        );
                    })}

                    <IonButton type="submit" className="ion-margin-top" expand="full">Submit</IonButton>
                </form>
            </IonContent>
        </IonPage>
        );

Will Get this error:

Type ‘{ onChange: ChangeHandler; onBlur: ChangeHandler; ref:
RefCallBack; name: string; min?: string | number | undefined; max?:
string | number | undefined; … 7 more …; inputmode?: undefined; }
| { …; }’ is not assignable to type ‘IntrinsicAttributes & IonInput
& Pick<HTMLAttributes, “onBlur” | “onChange” |
… 250 more … | “onTransitionEndCapture”> & StyleReactProps &
RefAttributes<…>’. Type ‘{ onChange: ChangeHandler; onBlur:
ChangeHandler; ref: RefCallBack; name: string; min?: string | number |
undefined; max?: string | number | undefined; … 7 more …;
inputmode?: undefined; }’ is not assignable to type ‘IonInput’.
Types of property ‘”max”‘ are incompatible.
Type ‘string | number | undefined’ is not assignable to type ‘string | undefined’.
Type ‘number’ is not assignable to type ‘string | undefined’.

My Dependencies:

• @ionic/react”: “^6.0.0”
• react-hook-form”: “^7.27.0”

I did some research through internet but didnt get a fix. May anyone help?
Moreover, are there any other forms framework are good for ionic project? Thanks!!