Neste componente os ícones editar e excluir estão alinhados a direita. Porém, quando clico em editar os ícones cancelar e salvar são exibidos, porém alinhados à esquerda. Como fazer com que os ícones no modo de edição fiquem alinhados a direita? /* eslint-disable no-underscore-dangle */
import React, { useEffect, useState } from "react";
import {
    TData,
    RelCard,
    RelGrid,
    RelText,
    RelStack,
    RelTable,
    RelButton,
    RelSelect,
    RelSwitch,
    useRelTable,
    RelTransitions,
    RelTableLocalization,
    RelChip
} from "@rel/core";
import { RelIcon } from "@rel/icons";
import { useTranslation } from "react-i18next";

import { v4 } from "uuid";
import { ZodError } from "zod";
import { permissionSchema } from "./schema";
import { TabPermissionsProps } from "./interface";

export const TabPermissions: React.FC<TabPermissionsProps> = ({
    errors,
    control,
    setError,
    clearErrors,
    setBtnSaveDisabled,
    validatePermissions
}) => {
    // #region Hooks
    const { t } = useTranslation();

    const [btnAddDisabled, setBtnAddDisabled] = useState(false);

    const [permissionsData, setPermissionsData] = useState<any[]>([]);

    const [showPermissions, setShowPermissions] = useState(
        validatePermissions ?? false
    );

    const [newPermissionId, setNewPermissionId] = useState<string | null>(null);

    const [_permissionsDeletedId, setPermissionsDeletedId] = useState<number[]>(
        []
    );

    // #endregion

    const addPermissionHandler = () => {
        setBtnAddDisabled(true);
        setBtnSaveDisabled(true);

        const newPermission = {
            id: v4(),
            name: null,
            permission: 2
        };

        setNewPermissionId(newPermission.id);
        setPermissionsData((prev) => [...prev, newPermission]);
    };

    useEffect(() => {
        if (newPermissionId) {
            const newRow = tablePermissions
                .getRowModel()
                .rows.find((row) => row.original.id === newPermissionId);
            if (newRow) {
                setNewPermissionId(null);
                tablePermissions.setEditingRow(newRow);
            }
        }
    }, [permissionsData]);

    const savePermissionHandle = async ({
        row,
        values
    }: {
        row: any;
        values: any;
    }) => {
        const id = row?.original?.id;

        try {
            const castedData = permissionSchema.parse({
                ...values,
                id
            });

            setPermissionsData((prev) =>
                prev.map((item) => {
                    if (item.id === id) {
                        return castedData;
                    }
                    return item;
                })
            );

            setBtnAddDisabled(false);
            setBtnSaveDisabled(false);
            tablePermissions.setEditingRow(null);
        } catch (error) {
            if (error instanceof ZodError) {
                error.issues.map((item) =>
                    setError(
                        `permissions.${row.index}.${item.path[0]}` as any,
                        {
                            message: item.message
                        }
                    )
                );
            }
        }
    };

    const deletePermissionHandle = (
        _event: React.MouseEvent | null,
        row: any
    ) => {
        const parsedId = Number(row.original.id);
        if (!Number.isNaN(parsedId)) {
            setPermissionsDeletedId((prev) => [...prev, parsedId]);
        }

        setPermissionsData((prevState) => {
            const permissionDataCopy = [...prevState];
            permissionDataCopy.splice(row.index, 1);
            return permissionDataCopy;
        });
    };

    const cancelRowHandler = () => {
        setBtnAddDisabled(false);
        setBtnSaveDisabled(false);
        tablePermissions.setEditingRow(null);
    };

    const permissionOtions: { value: number; label: string }[] = [
        { value: 1, label: t("Edição") },
        { value: 2, label: t("Visualização") }
    ];

    const tablePermissions = useRelTable({
        enableSorting: false,
        enableTopToolbar: false,
        enableBottomToolbar: false,
        enableEditing: true,
        createDisplayMode: "row",
        editDisplayMode: "row",
        enableColumnActions: false,
        positionActionsColumn: "last",
        localization: RelTableLocalization.PtBr,
        onEditingRowSave: savePermissionHandle,
        onEditingRowCancel: cancelRowHandler,
        renderRowActions: ({ row, table }) => (
            <RelGrid container justifyContent="flex-end" spacing={2}>
                <RelGrid>
                    <RelButton
                        iconButton
                        color="warning"
                        onClick={() => {
                            table.setEditingRow(row);
                            setBtnAddDisabled(true);
                            setBtnSaveDisabled(true);
                        }}
                    >
                        <RelIcon name="pencil" size={14} />
                    </RelButton>
                </RelGrid>
                <RelGrid>
                    <RelButton
                        color="error"
                        iconButton
                        onClick={(e) => deletePermissionHandle(e, row)}
                    >
                        <RelIcon name="trash" size={14} />
                    </RelButton>
                </RelGrid>
            </RelGrid>
        ),

        displayColumnDefOptions: {
            "mrt-row-actions": {
                header: t("Ações"),
                size: 120,
                minSize: 120,
                maxSize: 120,
                muiTableHeadCellProps: {
                    align: "right"
                }
            }
        },

        data: (permissionsData as TData[]) ?? [],
        columns: [
            {
                id: "userId",
                accessorKey: "userId",
                header: t("Usuario"),
                Cell: ({ cell }) => (
                    <RelText
                        sx={{
                            overflow: "hidden",
                            textOverflow: "ellipsis",
                            whiteSpace: "nowrap",
                            cursor: "pointer"
                        }}
                    >
                        {cell.getValue() ?? ""}
                    </RelText>
                ),
                muiEditTextFieldProps: ({ row }) => {
                    const userIdError = errors.permissions?.[row.index]?.userId;

                    return {
                        required: true,
                        error: !!userIdError,
                        helperText: userIdError?.message ?? "",
                        onFocus: () =>
                            clearErrors(`permissions.${row.index}.userId`)
                    };
                }
            },
            {
                id: "permission",
                accessorKey: "permission",
                header: t("Permissão"),
                Cell: ({ cell }) => (
                    <RelChip
                        color={cell.getValue() === 1 ? "success" : "warning"}
                        label={
                            cell.getValue() === 1
                                ? t("Edição")
                                : t("Visualização")
                        }
                    />
                ),

                Edit: ({ cell, row }) => (
                    <RelSelect
                        name={`permissions.${row.index}.permission`}
                        control={control}
                        options={permissionOtions}
                        defaultValue={cell.getValue()}
                        onChange={(e: any) => {
                            const value = e?.target?.value ?? e?.value;
                            row._valuesCache[cell.column.id] = value;
                        }}
                        required
                        fullWidth
                    />
                ),

                muiEditTextFieldProps: ({ row }) => {
                    const permissionError =
                        errors.permissions?.[row.index]?.permission;

                    return {
                        required: true,
                        error: !!permissionError,
                        helperText: permissionError?.message ?? "",
                        onFocus: () =>
                            clearErrors(`permissions.${row.index}.permission`)
                    };
                }
            }
        ]
    });

    return (
        <RelStack>
            <RelGrid
                container
                spacing={2}
                alignItems="center"
                justifyContent="center"
            >
                <RelGrid xs={12}>
                    <RelSwitch
                        name="validatePermissions"
                        control={control}
                        onChange={(e) => {
                            setShowPermissions(e.target.checked);
                            clearErrors("permissions");
                        }}
                        checked={showPermissions}
                        defaultValue={showPermissions}
                        label={t("Validar Permissões")}
                        sx={{ ml: 1 }}
                    />
                </RelGrid>

                <RelGrid xs={12}>
                    <RelTransitions.Collapse in={showPermissions}>
                        <RelGrid
                            mb={2}
                            xs={12}
                            container
                            paddingRight={1}
                            justifyContent="flex-end"
                        >
                            <RelButton
                                startIcon={<RelIcon name="plus" size={16} />}
                                onClick={addPermissionHandler}
                                disabled={btnAddDisabled}
                            >
                                {t("Adicionar")}
                            </RelButton>
                        </RelGrid>
                        <RelGrid
                            xs={12}
                            sx={{
                                height: "calc(100vh - 450px)",
                                overflow: "auto"
                            }}
                        >
                            <RelCard.Root>
                                <RelTable table={tablePermissions} />
                            </RelCard.Root>
                        </RelGrid>
                    </RelTransitions.Collapse>
                </RelGrid>
            </RelGrid>
        </RelStack>
    );
};