Почему возникает ошибка register is not a function?

export const CustomInput = ({type, className, placeholder, onChange, inputRef, name, pattern, errors, errorMassage, required, register}) => {
 
    return (
 
        <label className='label'>
            <input className={className}
                   onChange={onChange}
                   ref={inputRef}
                   placeholder={placeholder}
                   type={type}
                   {...register(name, { required, pattern })}
            />
            {errors && <p className='error-massage'>{errorMassage ? errorMassage : `${name} is required.`}</p>}
        </label>
    )
}
 
 
const email = 'admin@gmail.com'
const password = 'password'
export const ModalWindow = () => {
    const {showModal, setShowModal} = useContext(CustomContext)
 
    const {
        register,
        handleSubmit,
        formState: { errors },
        setError,
    } = useForm()
 
    const onSubmit = (data) => {
        if (data?.email === email && data?.password === password) {
            // navigate('/home')
            console.log('home')
        } else {
            if (data?.email !== email) {
                setError("email")
            }
            if (data?.password !== password) {
                setError("password")
            }
        }
    }
 
    return (
        <div className={'modal_window'}>
            <h2>Sign in to your account</h2>
 
            <form className={'login-form'} onSubmit={handleSubmit(onSubmit)}>
                <CustomInput
                    className={'modal_window_input'}
                    placeholder={'Your email'}
                    type={'text'}
                    name={'email'}
                    register={register}
                    required={true}
                    pattern={/^[^\s@]+@[^\s@]+\.[^\s@]+$/}
                    errors={errors.email}
                    errorMassage={'Invalid Email.'}
                />
                <CustomInput
                    className={'modal_window_input'}
                    placeholder={'Your password'}
                    type={'password'}
                    name={'password'}
                    register={register}
                    required={true}
                    errors={errors.password}
                    errorMassage={'Invalid Password.'}
                />
                <input className={'sign_in_button'} type="submit" value='Sign in'/>
            </form>
            <CustomButton onClick={() => setShowModal(!showModal)} className={'create_new_account_button'} text={'Create new account'}/>
        </div>
    )
}

<CustomInput type={'text'} inputRef={searchRef} className={'search_input'} placeholder={'Search movies...'} />

const {
register,
handleSubmit,
formState: { errors },
setError,
} = useForm()

<label className='label'>
<input className={className}
onChange={onChange}
ref={inputRef}
placeholder={placeholder}
type={type}
{...register(name, { required, pattern })}
/>
{errors && <p className='error-massage'>{errorMassage ? errorMassage : `${name} is required.`}</p>}
</label>
)
}