how handle input errors validation in sub component react hook form

I made a component called Input. Now I want to know if the error was in that component (Input component) Show me. I use Input component inside Login component and I use react-hook-form for validating forms.

Input component

const Input = ({data, extraData, register, errors})=>{
    const inp = extraData.name
    return <Fragment>
        {
            extraData.id &&
            extraData.label &&
            <label htmlFor={extraData.id}>{extraData.label}</label>
        }
        <input {...register(extraData.name, {...data})} {...extraData} />
        {data.required && <Fragment>
            {errors.inp?.type === 'required' && <p>required</p>}
        </Fragment>}
    </Fragment>
}
export default Input;

Login component

const Login = ()=>{
    const {handleSubmit, register, formState: {errors}} = useForm()
    const onS = (data) =>{
        console.log(data)
    }
    return <Fragment>
        <form onSubmit={handleSubmit(onS)}>
            <Input data={
                {
                    minLength : 5,
                    maxLength : 30,
                    required : true,
                }
            } extraData ={
                {
                    type : 'text',
                    placeholder : 'Enter Your Name',
                    name : 'name',
                    label : 'name', id : 'name1'
                }
            } register={register} errors={errors}/>

            <Input data={
                {
                    minLength : 5,
                    maxLength : 30,
                    required : true,
                }
            } extraData ={
                {
                    type : 'text',
                    placeholder : 'Enter Your Family',
                    name : 'Family',
                    label : 'Family', id : 'Family1'
                }
            } register={register} errors={errors}/>

            <button>Submit</button>
        </form>

    </Fragment>
}
export default Login;