Dealing with this issue has been a challenge for me too, but I found a solution that worked well.

Here's an updated approach for react-hook-form version 6. You can achieve it without relying on useState (check out the sandbox link provided below):

import React, { useState } from "react";
import { useForm, Controller } from "react-hook-form";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";

export default function CheckboxesGroup() {
  const defaultNames = ["bill", "Manos"];
  const { control, handleSubmit } = useForm({
    defaultValues: { names: defaultNames }
  });

  const [checkedValues, setCheckedValues] = useState(defaultNames);

  function handleSelect(checkedName) {
    const newNames = checkedValues?.includes(checkedName)
      ? checkedValues?.filter(name => name !== checkedName)
      : [...(checkedValues ?? []), checkedName];
    setCheckedValues(newNames);

    return newNames;
  }

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      {["bill", "luo", "Manos", "user120242"].map(name => (
        <FormControlLabel
          control={
            <Controller
              name="names"
              render={({ onChange: onCheckChange }) => {
                return (
                  <Checkbox
                    checked={checkedValues.includes(name)}
                    onChange={() => onCheckChange(handleSelect(name))}
                  />
                );
              }}
              control={control}
            />
          }
          key={name}
          label={name}
        />
      ))}
      <button>Submit</button>
    </form>
  );
}

Sandbox link for reference: https://codesandbox.io/s/material-demo-54nvi?file=/demo.js

Additionally, here's another method that involves default selected items and doesn't require the use of useState: https://codesandbox.io/s/material-demo-bzj4i?file=/demo.js

My approach using react hook form 7 differs from others as it effectively handles reset and setValue functionalities.

<Controller
      name={"test"}
      control={control}
      render={({ field }) => (
        <FormControl>
          <FormLabel id={"test"}>{"label"}</FormLabel>
          <FormGroup>
            {items.map((item, index) => {
              const value = Object.values(item);
              return (
                <FormControlLabel
                  key={index}
                  control={
                    <Checkbox
                      checked={field.value.includes(value[0])}
                      onChange={() =>
                        field.onChange(handleSelect(value[0],field.value))
                      }
                      size="small"
                    />
                  }
                  label={value[1]}
                />
              );
            })}
          </FormGroup>
        </FormControl>
      )}
    />

Check out the code on codesandbox: Mui multiple checkbox

Here is a functional example:

import React from "react";
import { useForm, Controller } from "react-hook-form";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";

export default function CheckboxesGroup() {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      bill: "bill",
      luo: ""
    }
  });

  return (
    <form onSubmit={handleSubmit(e => console.log(e))}>
      {["bill", "luo"].map(name => (
        <Controller
          key={name}
          name={name}
          as={
            <FormControlLabel
              control={<Checkbox value={name} />}
              label={name}
            />
          }
          valueName="checked"
          type="checkbox"
          onChange={([e]) => {
            return e.target.checked ? e.target.value : "";
          }}
          control={control}
        />
      ))}
      <button>Submit</button>
    </form>
  );
}

codesandbox link: https://codesandbox.io/s/material-demo-65rjy?file=/demo.js:0-932

However, I advise against using this method because Checkbox in material UI may be expected to return checked (boolean) instead of (value).

Here is a custom solution that diverges from the default Material UI components. In my interface, each radio button is accompanied by an icon and text, without displaying the default bullet point:

const COMPANY = "company";

const INDIVIDUAL = "individual";

const [scope, setScope] = useState(context.scope || COMPANY);

const handleChange = (event) => {
  event.preventDefault();

  setScope(event.target.value);
};

<Controller
  as={
    <FormControl component="fieldset">
      <RadioGroup
        aria-label="scope"
        name="scope"
        value={scope}
        onChange={handleChange}
      >
        <FormLabel>
          {/* Icon from MUI */}
          <Business />

          <Radio value={COMPANY} />

          <Typography variant="body1">Company</Typography>
        </FormLabel>

        <FormLabel>
          {/* Icon from MUI */}
          <Personal />

          <Radio value={INDIVIDUAL} />

          <Typography variant="body1">Individual</Typography>
        </FormLabel>
      </RadioGroup>
    </FormControl>
  }
  name="scope"
  control={methods.control}
/>;

Note: This example utilizes React Hook Form without object destructuring:

const methods = useForm({...})