Material UI + React Hook Form Can't Submit Disabled Checkboxes

The requirement I'm trying to solve is to have all fields disabled while the form is submitting. I've got it working for text, selects, and radios fine but having trouble with required checkboxes.

I'm using nextjs typescript with react-hook-form and material-ui.

When adding the disabled={isSubmitting} prop to the <FormControl>, RHF doesn't recognize the values in it anymore and marks it as an error (field required). Here's the relevant component but I've included the full codesandbox below which may highlight the problem clearer.

const id = "vehicles";
const OPTIONS = ["bike", "car", "truck", "van"];

export const Vehicles = (): JSX.Element => {
  const {
    register,
    formState: { errors }
  } = useFormContext();
  const error = get(errors, id);

  return (
    <CheckboxMultiFieldInput label="Vehicles" error={error} required>
      {OPTIONS.map(startCase).map((option: string) => (
        <CheckBoxOptionMap
          value={option}
          label={option}
          key={option}
          registerProps={register(id, { required: true })}
        />
      ))}
    </CheckboxMultiFieldInput>
  );
};

export const CheckBoxOptionMap = ({
  value,
  label,
  registerProps
}: CheckboxOptionMapInterface) => {
  // Also can't submit with the disabled prop here instead
  // const {
  //   formState: { isSubmitting }
  // } = useFormContext();
  return (
    <FormControlLabel
      value={value}
      control={<Checkbox {...registerProps} />}
      label={label}
      aria-label={`${label}-option-${value}`}
      // disabled={isSubmitting}
    />
  );
};

export const CheckboxMultiFieldInput = ({
  children,
  label,
  error,
  required
}: CheckboxMultiFieldInterface): JSX.Element | null => {
  // Cannot submit anymore once this disabled prop is added
  // const {
  //   formState: { isSubmitting }
  // } = useFormContext();

  if (!children || children.length === 0) {
    return null;
  }

  return (
    <div className="inputBox">
      <FormControl
        error={error !== undefined}
        required={required}
        // disabled={isSubmitting}
      >
        <FormLabel>{label}</FormLabel>
        {children}
        {error && (
          <FormHelperText id={`${label}-helper-text`}>
            {error.message || error.type}
          </FormHelperText>
        )}
      </FormControl>
    </div>
  );
};

Thank you in advance to anyone who can help! I've really been struggling with this and there's not much documentation on using these two libraries together.

Working CodeSandbox example