I am working on a checkbox control.
And this method does not seem to be optimal.

function App() {
  const methods = useForm();
  const { setValue, register } = methods;

  const cbxOnchange = (e) => {
    const { checked } = e.target;
    if(!checked)
      setValue('cbxall', false);
    const cbx1 = document.getElementsByName('cbx1')[0].checked;
    const cbx2 = document.getElementsByName('cbx2')[0].checked;
    if(cbx1 && cbx2)
      setValue('cbxall', true);
  };
  return (
    <>
      <div>
        <input type='checkbox' {...register('cbxall',{ onChange: (e) => {
          setValue('cbx1', e.target.checked);
          setValue('cbx2', e.target.checked);
        } })} defaultChecked />
        <input type='checkbox' {...register('cbx1',{ onChange: cbxOnchange })} defaultChecked />
        <input type='checkbox' {...register('cbx2',{ onChange: cbxOnchange })} defaultChecked />
      </div>
    </>
  )
}

Please, somebody help me.