To validate the form, I decided to use the react-hook-form library, when you select the last name in the input in the console, an error occurs as in the screenshot. The input itself is a dadata library and I prescribe all the necessary attributes for the react-hook-form to the component, I think that's why the error occurs, what should I do? And how can this be resolved? I removed all the unimportant part of the code if that.

error screenshot

export default function Fio () {
    const { register, formState: { errors } } = useForm();
    const [value, setValue] = useState();
    return (
        <>
            <span id="FIO">ФИО</span>
            <FioSuggestions
                token={token}
                value={value}
                onChange={setValue}
                {...register( "fio",{required: true})}/><br/>
            <div style={{height: 40}}>
                {errors?.fio && <p>Error</p>}
            </div>
        </>
    )
}

export default function Form () {
    const {handleSubmit} = useForm();
    const onSubmit = (data) => {
        alert(JSON.stringify(data))
    }
        return(
            <form id="formAdv" onSubmit={handleSubmit(onSubmit)}>
                <Fio/>
                <Birthday/><br/>
                <Phone/><br/>
                <label>
                    <input type="radio"
                           name="gender"
                           value="MALE"
                           /> Мужчина
                    <input type="radio"
                           name="gender"
                           value="FEMALE"
                           /> Женщина
                </label><br/>
                <Multiselector/><br/>
                <Selector/><br/>
                <label>
                    <input type="checkbox"/> Не отправлять СМС.
                </label><br/>
                <input type="submit"/>
            </form>
        )
    }