const handleRenderChildRoles = (roles: Role[], level: number) => {
    return roles.map((role, index) => (
      <React.Fragment key={role.id}>
        <tr className={classes.row}>
          <td> {!level && role.id}</td>
          <td
            style={{
              marginLeft: `${25 * level}px`,
              paddingLeft: level ? `30px` : "18px",

              display: "block",
            }}
            className={level ? classes.subRow : ""}>
            {!!level && (
              <div
                style={{
                  position: "absolute",
                  height: !index ? "70%" : "100%",
                  width: "25px",
                  top: index ? "-50%" : "-20%",
                  left: "0",
                  borderLeft: "1px solid #000",
                  borderBottom: "1px solid #000",
                }}></div>
            )}
            {role.name}
          </td>
          <td>
            <Popover
              overlayInnerStyle={{
                padding: 0,
              }}
              content={
                <PopoverContent
                  onClickEdit={onClickEditOption}
                  onClickDelete={onClickDelete}
                />
              }
              placement="bottom"
              trigger="click">
              <Gear
                onClick={() => onClickGearIcon(role)}
                size={22}
                style={{
                  margin: "auto",
                  display: "block",
                  cursor: "pointer",
                }}
              />
            </Popover>
          </td>
        </tr>
        {!!role.child_role.length &&
          handleRenderChildRoles(role.child_role, level + 1)}
      </React.Fragment>
    ));
  };

  const handleRenderChildRoles = (roles: Role[], level: number) => {
    return roles.map((role, index) => (
      <React.Fragment key={role.id}>
        <tr className={classes.row}>
          <td> {!level && role.id}</td>
          <td
            style={{
              marginLeft: `${25 * level}px`,
              paddingLeft: level ? `30px` : "18px",

              display: "block",
            }}
            className={level ? classes.subRow : ""}>
            {!!level && (
              <div
                style={{
                  position: "absolute",
                  height: !index ? "70%" : "100%",
                  width: "25px",
                  top: index ? "-50%" : "-20%",
                  left: "0",
                  borderLeft: "1px solid #000",
                  borderBottom: "1px solid #000",
                }}></div>
            )}
            {role.name}
          </td>
          <td>
            <Popover
              overlayInnerStyle={{
                padding: 0,
              }}
              content={
                <PopoverContent
                  onClickEdit={onClickEditOption}
                  onClickDelete={onClickDelete}
                />
              }
              placement="bottom"
              trigger="click">
              <Gear
                onClick={() => onClickGearIcon(role)}
                size={22}
                style={{
                  margin: "auto",
                  display: "block",
                  cursor: "pointer",
                }}
              />
            </Popover>
          </td>
        </tr>
        {!!role.child_role.length &&
          handleRenderChildRoles(role.child_role, level + 1)}
      </React.Fragment>
    ));
  };