I'd need to add custom handler in the onChange event of a checkbox, however, doing so onChange won't reflect to react-hook-form.

I've followed the instructions how to do custom onChange by following the chapter

Custom onChange, onBlur: ​ https://react-hook-form.com/api/useform/register/

However cannot make it work.

Seeing in the DevTool the first checkbox change reflects to form just fine however the latter with a custom handler does not.

...
const subscribeToNewsLetter = register('subscribeToNewsLetter')
...
<div>
  ​<label> I consent </label>
  ​<input            
    ​type="checkbox"
    ​{...register('consent')}  //This checkbox without any custom handler works fine
  ​/>
​</div>

​<div>
  ​<label>Subscribe to newsletter</label>
  ​<input            
    ​type="checkbox"
    ​onChange={(e) => {
      ​subscribeToNewsLetter.onChange(e); // This needs to do custom stuff in onChange
      ​handleChange(e);         // However doing so 
    ​}}                         // the change is not registered to hook-form
    ​onBlur={subscibeToNewLetter.onBlur}
    ​ref={subscibeToNewLetter.ref} 
  ​/>
</div>
...

I've been fiddling it here which illustrates the problem the best. https://stackblitz.com/edit/react-hook-form-fiddling-zlnhzs