setValue hook with array data from a checkbox field

[tim-cockburn]

Hi there,
I'm having an issue with the react hook form using array data from a collection of checkboxes. basically i want to limit the number of checked boxes but also when a user clicks on the checkboxes parent card component, the box gets checked.
to watch for data changes i am also using the watch api like so...

const toggles = watch('select',[])

my check boxes within the form.....

{ brochures && brochures.map((brochure,index) => {
return (
<div className="col col-6 col-lg-3 p-3 mx-auto" key={brochure.code + index}>
<div className="card p-3 shadow-sm" onClick={()=>setValues( toggles, brochure.code )}>

<input {...register("select",{required:true, maxLength:3})}
className={ form-check-input }
type="checkbox"
value={brochure.code}
id={brochure.code}
disabled={toggles.length >=3 && !toggles.includes(brochure.code) ? true : false}

                        />
                    <label className="form-check-label ps-2">Order Now</label>
                    { brochure && brochure.new &&  <span className="float-end small tf-orange mt-1">NEW</span> }
                    </span>
                    <img src={brochure.image + '?width=300'}></img>
                </div>
            </div>
            )
        })}

and the function it hits on the onclick event........

const setValues = (code:string) => {

let updateSelectedOptions

if(toggles.length <= 3){
        if(toggles.includes(code)){
            updateSelectedOptions = toggles.filter(function(brochure){
                return brochure !== code
            })
                setValue('select', updateSelectedOptions)
        } else {
            updateSelectedOptions = [...toggles,code]
            setValue('select', updateSelectedOptions)
        }
}

}

the problem i have is toggles is always a step behind! any ideas???