How can I solve TypeError: path.split is not a function

Question

Now I'm using react-hook-form for login validation.

But, TypeError: path.split is not a function errors continue to occur when ref={register} is entered in input tag.

import React from 'react';
import {useForm} from "react-hook-form";
import './Auth.css';

export default function Register() {

    const {register, errors, watch} = useForm();

    return (
        <div>
            <form>
                <label>Email</label>
                <input type="email" name="email" ref={register({ required: true})} />
                <label>Password</label>
                <input type="password" />
                <label>Password Confirm</label>
                <input type="password"/>
                <input type="submit" />
            </form>
        </div>
    );
}

Even I copied and pasted the example code, the same error occurs, so how can I solve it?

The error code is as follows.

Answer 1

I think you're using React Hook Form v7 with the v6 syntax, which is why you get that error.

Here is a similar issue: https://github.com/react-hook-form/react-hook-form/issues/4595

With the v7 you have to use register like that:

<input type="email" {...register('email', { required: true })} />

Or install v6, documentation here: https://react-hook-form.com/v6/api#register

Answer 2

Try this:

<input placeholder="To" type="email" {...register('email', { required: true })} />