Getting empty data from my form react-hook-form on update

Question

I have a form that includes Role attributes. When i save the role for the first time, there is no problem. But when i update the Form it only send the changed values in the form.

For example this is the first time when i create a Role:

enter image description here

And then, when i update the form, for example i only change the "menu" :

enter image description here

The others going null.

This is the part of "Form Access":

 <FormAccess
        isHorizontal
        onSubmit={handleSubmit(save)}
        role="manage-realm"
        className="pf-u-mt-lg"
      >
        <FormGroup
          label={t("roleName")}
          fieldId="kc-name"
          isRequired
          validated={errors.name ? "error" : "default"}
          helperTextInvalid={t("common:required")}
        >
          <TextInput
            ref={register({ required: !editMode })}
            type="text"
            id="kc-name"
            name="name"
            isReadOnly={editMode}
          />
        </FormGroup>
        <FormGroup
          label={t("common:description")}
          fieldId="kc-description"
          validated={
            errors.description
              ? ValidatedOptions.error
              : ValidatedOptions.default
          }
          helperTextInvalid={errors.description?.message}
        >
          <TextArea
            name="description"
            aria-label="description"
            isDisabled={getValues().name?.includes("default-roles")}
            ref={register({
              maxLength: {
                value: 255,
                message: t("common:maxLength", { length: 255 }),
              },
            })}
            type="text"
            validated={
              errors.description
                ? ValidatedOptions.error
                : ValidatedOptions.default
            }
            id="kc-role-description"
          />
        </FormGroup>
        <FormGroup label={t("securityLevel")} fieldId="securityLevel">
          <Controller
            name={`attributes["${securityLevelIndex}"]`}
            control={control}
            defaultValue={{
              key: "",
              value: "",
            }}
            render={({ onChange }) => (
              <Select
                id="securityLevelSelect"
                placeholderText={
                  role?.attributes![securityLevelIndex]?.key! == "securityLevel"
                    ? attributes[securityLevelIndex].value
                    : t("selectSecurityLevel")
                }
                name={`attributes["${securityLevelIndex}"]`}
                isOpen={securityLevelOpen}
                selections={securityLevel}
                onToggle={() => setSecurityLevelOpen(!securityLevelOpen)}
                onSelect={(_, value) => {
                  setSecurityLevel(value as string);
                  setSecurityLevelOpen(false);
                  onChange({ key: "securityLevel", value });
                }}
              >
                {["10", "20", "30", "40", "50"].map((value) => (
                  <SelectOption key="securityLevel" value={value}>
                    {value}
                  </SelectOption>
                ))}
              </Select>
            )}
          />
        </FormGroup>
        <FormGroup label={t("Type")} fieldId="type">
          <Controller
            name={`attributes["${typeIndex}"]`}
            control={control}
            defaultValue={{
              key: attributes[typeIndex]?.key == "type" ? "type" : "",
              value:
                attributes[typeIndex]?.key == "type"
                  ? attributes[typeIndex].value
                  : "",
            }}
            render={({ onChange }) => (
              <Select
                id="typeSelect"
                placeholderText={
                  role?.attributes![typeIndex]?.key! == "type"
                    ? attributes[typeIndex].value
                    : t("Type")
                }
                isOpen={typeOpen}
                name={`attributes["${typeIndex}"]`}
                selections={type}
                onToggle={() => setTypeOpen(!typeOpen)}
                onSelect={(_, value) => {
                  setType(value as string);
                  setTypeOpen(false);
                  onChange({ key: "type", value });
                }}
              >
                {["none", "menu"].map((value) => (
                  <SelectOption key={value} value={value}>
                    {value}
                  </SelectOption>
                ))}
              </Select>
            )}
          />
        </FormGroup>

And here is the useEffect part:

  useEffect(() => {
    if (type === "menu") setVisible(true);
    else setVisible(false);
    setSelectedCheckboxes(selectedCheckboxes);
  }, [type]);

  const history = useHistory();
  useEffect(() => {
    if (role) {
      const attributes = role.attributes!;
   
      const secLevelIndex = attributes.findIndex(
        (attr) => attr.key === "securityLevel"
      );
      if (secLevelIndex > -1) {
        console.log("SecLevelIndex: " + secLevelIndex);
        setSecurityLevelIndex(secLevelIndex);
        setSecurityLevel(attributes[secLevelIndex].value);
      }

      const typeLevelIndex = attributes.findIndex(
        (attr) => attr.key === "type"
      );
      if (typeLevelIndex > -1) {
        console.log("TypeLevelIndex: " + typeLevelIndex);
        setType(attributes[typeLevelIndex].value);
        setTypeIndex(typeLevelIndex);
      }

      const menuLevelIndex = attributes.findIndex(
        (attr) => attr.key === "menu"
      );
      if (menuLevelIndex > -1) {
        console.log("menuLevelIndex: " + menuLevelIndex);
        setVisible(true);
        setMenuIndex(menuLevelIndex);
      }
    }
  }, [role?.attributes?.length, selectedCheckboxes.length, saved]);

By the way, im using Keycloak framework.