setFocus isn't working for RadioButtonGroup and custom errors are breaking focus functionality

[AdamZajler]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Currently control.setFocus() cannot be used; on the RadioButtonGroup .

Expected behavior 🤔

Focus on this element can be setted

Steps to reproduce 🕹

codesandbox

Form to embed

import {
  FormContainer,
  RadioButtonGroup,
  useForm,
  TextFieldElement,
  SelectElement,
  CheckboxElement,
} from "react-hook-form-mui";
import { Stack, Button } from "@mui/material";

interface FormValues {
  select: string;
  inputFirstName: string;
  radioType: string;
  agreement: boolean;
}

export default function Form() {
  const control = useForm<FormValues>({
    mode: "onBlur",
    criteriaMode: "all",
    defaultValues: {
      select: "",
      inputFirstName: "",
      radioType: "",
      agreement: false,
    },
  });

  const onSubmit = async (formData: FormValues): Promise<void> => {
    if (formData.agreement === false) {
      control.setError("agreement", {
        type: "custom",
        message: "error after submitting",
      });
      control.setError("select", {
        type: "custom",
        message: "error after submitting",
      });
    }
  };

  return (
    <div className="Form">
      <FormContainer
        FormProps={{ method: "post" }}
        formContext={control}
        onSuccess={onSubmit}
      >
        <Stack gap={4}>
          <SelectElement
            label="Select"
            name="select"
            options={[
              {
                id: "1",
                label: "Label 1",
              },
              {
                id: "2",
                label: "label 2",
              },
            ]}
          />
          <TextFieldElement
            required
            type="text"
            name="inputFirstName"
            label="inputFirstName"
            sx={{ gridColumn: { xs: "1/3", sm: "1/2" } }}
          />
          <RadioButtonGroup
            required
            name="radioType"
            label="radioType"
            options={[
              {
                id: "paid-vouchers",
                label: "test1",
              },
              {
                id: "paid-vouchers-2",
                label: "test2",
              },
            ]}
            row
          />
          <CheckboxElement name="agreement" label="*test" />
          <Stack gap={2}>
            <span onClick={() => control.setFocus("select")}>select focus</span>
            <span onClick={() => control.setFocus("inputFirstName")}>
              inputFirstName focus
            </span>
            <span onClick={() => control.setFocus("radioType")}>
              radioType focus
            </span>
            <span onClick={() => control.setFocus("agreement")}>
              agreement focus
            </span>
            <span
              onClick={() =>
                control.setError("agreement", {
                  type: "custom",
                  message: "lol",
                })
              }
            >
              agreement error
            </span>
          </Stack>
          <Button type="submit" variant="contained">
            SUBMIT
          </Button>
        </Stack>
      </FormContainer>
    </div>
  );
}