Using bootstrap components with react-hook validation form

I've been working with React for a while, and decided to try out react-hook. I'm trying to make a simple form with some simple validation, but it seems like the validation does not apply to bootstrap components. For the 'regular' input, it works fine, but for the form.control it's not working(The validation is skipped). Saw one solution where you wrap the componenet in a controller, as shown bellow, but i got the same result. Any ideas? Thanks.

function Example(){
const { register, handleSubmit, control, errors } = useForm();
const onSubmit = (data:any) => {
    console.log(data)
}
return(
    <Form onSubmit={handleSubmit(onSubmit)}>

            <Form.Label column>Name</Form.Label>

                <Controller as={<Form.Control/>} name="firstName" control={control} ref={register({required: true})} defaultValue="" />
                {errors.firstName && <p>This is required</p>}

                <input name="lastName" className="form-control" ref={register({required: true})} /> 
                {errors.lastName && <p>This is required</p>}

        <input type="submit" ref={register({required: true})}/>
    </Form>
)

}