How to change row numbers to Persian numbers in Material React Table

Question

I am struggling to do this in Material React Table V2. I managed to change the numbers in pagination section but I can not find out how to do the same in the builtin row numbers. I have a function which converts the numbers to Persian numbers (convertToPersianNumber) but I can not figure out where to use it for the row numbers.

Any help appreciated

Here is my grid component:

// react imports
import { useMemo, useState, useEffect } from "react";

// helpers
import { convertToPersianNumber, findById } from "../helper.js";

// utils imports
import { defaultTableOptions } from "../utils.js";

// redux imports
import { useSelector, useDispatch } from "react-redux";
import { useGetItemsQuery } from "../slices/usersApiSlice";
import { setItemInfo, setItemsData } from "../slices/userReqSlice";

// library imports
import { PaginationItem } from "@mui/material";
import {
  ChevronLeft,
  ChevronRight,
  FirstPage,
  LastPage,
} from "@mui/icons-material";
import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
import {
  MaterialReactTable,
  useMaterialReactTable,
} from "material-react-table";

function ItemsGrid() {
  const { token } = useSelector((state) => state.auth);
  const { itemsData } = useSelector((state) => state.userReq);

  const [rowSelection, setRowSelection] = useState({});

  const dispatch = useDispatch();

  const { data: items, isLoading, isSuccess } = useGetItemsQuery(token);

  useEffect(() => {
    if (isSuccess) {
      const data = items.itemList.map((item, i) => ({
        _id: item.id,
        name: item.itemName,
        number: i + 1,
      }));

      dispatch(setItemsData(data));
    }
  }, [items, isSuccess, dispatch]);

  const columns = useMemo(
    () => [
      {
        accessorKey: "name",
        header: "نام گروه",
        size: 350,
        muiTableHeadCellProps: {
          sx: { color: "green", fontFamily: "sahel" },
          align: "right",
        },
        muiTableBodyCellProps: {
          sx: { fontFamily: "sahel" },
          align: "right",
        },
        Cell: ({ renderedCellValue }) => <strong>{renderedCellValue}</strong>,
        align: "right",
      },
      {
        accessorKey: "number",
        header: "ردیف",
        size: 100,
        muiTableHeadCellProps: {
          sx: { color: "green", fontFamily: "sahel" },
          align: "right",
        },
        muiTableBodyCellProps: {
          sx: { fontFamily: "sahel" },
          align: "right",
        },
        Cell: ({ renderedCellValue }) => (
          <strong>{convertToPersianNumber(renderedCellValue)}</strong>
        ),
        align: "right",
      },
    ],
    []
  );

  const table = useMaterialReactTable({
    ...defaultTableOptions,
    columns,
    data: itemsData,
    enableRowNumbers: true,
    muiPaginationProps: {
      color: "secondary",
      variant: "outlined",
      showRowsPerPage: false,
      dir: "rtl",
      renderItem: (item) => (
        <PaginationItem
          {...item}
          page={convertToPersianNumber(item.page)}
          slots={{
            previous: ChevronRight,
            next: ChevronLeft,
            first: LastPage,
            last: FirstPage,
          }}
        />
      ),
    },
    muiTableBodyCellProps: (cell, row) => {
      if (cell.column.accessorKey === "number") {
        return {
          children: <strong>{convertToPersianNumber(row.cells.number)}</strong>,
        };
      }
      return {};
    },
    getRowId: (originalRow) => originalRow._id,
    onRowSelectionChange: setRowSelection,
    state: { rowSelection },
  });

  console.log(table.getRowModel().rows);

  useEffect(() => {
    const id = Object.keys(table.getState().rowSelection)[0];
    const selectedItemInfo = findById(itemsData, id);

    if (id) {
      dispatch(setItemInfo(selectedItemInfo));
    } else {
      dispatch(setItemInfo(null));
    }
  }, [dispatch, table, rowSelection, itemsData]);

  return (
    <>
      {isLoading ? (
        <p className="skeleton">
          <Skeleton count={3} />
        </p>
      ) : (
        <div style={{ direction: "rtl" }}>
          <MaterialReactTable table={table} />
        </div>
      )}
    </>
  );
}

export default ItemsGrid;

Here is the default options for the grid:

// library imports
import { getMRT_RowSelectionHandler } from "material-react-table";

// table default options
export const defaultTableOptions = {
  // localization: MRT_Localization_FA,
  enablePagination: true,
  paginationDisplayMode: "pages",
  columnResizeDirection: "rtl",
  enableFullScreenToggle: false,
  positionToolbarAlertBanner: "none",
  // initialState: { pagination: { pageSize: 5 } },
  enableRowSelection: true,
  enableMultiRowSelection: false,
  muiTableBodyRowProps: ({ row, staticRowIndex, table }) => ({
    onClick: (event) =>
      getMRT_RowSelectionHandler({ row, staticRowIndex, table })(event),
    sx: { cursor: "pointer" },
  }),

  localization: {
    actions: "عملیات",
    and: "و",
    cancel: "انصراف",
    changeFilterMode: "تغییر حالت فیلتر",
    changeSearchMode: "تغییر حالت جستجو",
    clearFilter: "پاک کردن فیلتر",
    clearSearch: "پاک کردن جستجو",
    clearSelection: "پاک کردن انتخاب",
    clearSort: "پاک کردن مرتب سازی",
    clickToCopy: "کپی کردن",
    copy: "کپی",
    collapse: "بستن",
    collapseAll: "بستن همه",
    columnActions: "اقدامات ستون",
    copiedToClipboard: "کپی به کلیپ بورد",
    dropToGroupBy: "حذف گروه بندی {column}",
    edit: "ویرایش",
    expand: "باز کردن",
    expandAll: "باز کردن همه",
    filterArrIncludes: "شامل",
    filterArrIncludesAll: "شامل همه",
    filterArrIncludesSome: "شامل برخی",
    filterBetween: "بین",
    filterBetweenInclusive: "شامل بین",
    filterByColumn: "فیلتر توسط {column}",
    filterContains: "شامل",
    filterEmpty: "خالی",
    filterEndsWith: "به پایان می رسد با",
    filterEquals: "مساوی",
    filterEqualsString: "مساوی",
    filterFuzzy: "درهم",
    filterGreaterThan: "بزرگتر از",
    filterGreaterThanOrEqualTo: "بزرگتر مساوی با",
    filterInNumberRange: "بین",
    filterIncludesString: "شامل",
    filterIncludesStringSensitive: "شامل",
    filterLessThan: "کمتر از",
    filterLessThanOrEqualTo: "کمتر مساوی با",
    filterMode: " فیلتر :{filterType}",
    filterNotEmpty: "خالی نبودن  ",
    filterNotEquals: "مساوی نبودن با  ",
    filterStartsWith: "شروع با ",
    filterWeakEquals: "مساوی با ",
    filteringByColumn: "فیلتر با {column} - {filtertype} {filtervalue}",
    goToFirstPage: "صفحه اول",
    goToLastPage: "صفحه آخر",
    goToNextPage: "صفحه بعد",
    goToPreviousPage: "صفحه قبل",
    grab: "گرفتن",
    groupByColumn: "گروه بندی توسط {column}",
    groupedBy: "گروه بندی توسط ",
    hideAll: "پنهان کردن همه",
    hideColumn: "پنهان کردن ستون {column}",
    max: "حداکثر",
    min: "حداقل",
    move: "حرکت",
    noRecordsToDisplay: "موردی برای نمایش نمی باشد.",
    noResultsFound: "موردی یافت نشد.",
    of: "از",
    or: "یا",
    pin: "پین",
    pinToLeft: "پین به چپ",
    pinToRight: "پین به راست",
    resetColumnSize: "تنظیم مجدد اندازه ستون",
    resetOrder: "بازنشانی سفارش",
    rowActions: "اقدامات ردیف",
    rowNumber: "ردیف",
    rowNumbers: "اعداد ردیف",
    rowsPerPage: "تعداد ردیف در هر صفحه",
    save: "ذخیره کردن",
    search: "جستجو",
    selectedCountOfRowCountRowsSelected:
      "{selectedCount} از {rowCount} انتخاب شد",
    select: "انتخاب",
    showAll: "نمایش همه",
    showAllColumns: "نمایش تمام ستون ها",
    showHideColumns: "نمایش/مخفی کردن ستون ها",
    showHideFilters: "نمایش/مخفی کردن فیلتر ها",
    showHideSearch: "نمایش/مخفی کردن جستجو ها",
    sortByColumnAsc: "مرتب کردن {column} صعودی ",
    sortByColumnDesc: "مرتب کردن نزولی  {column} ",
    sortedByColumnAsc: "مرتب شده {column} براساس صعودی ",
    sortedByColumnDesc: "مرتب شده  {column} براساس نزولی ",
    thenBy: "سپس توسط ",
    toggleDensity: "حجم ردیف ها",
    toggleFullScreen: "بزرگنمایی",
    toggleSelectAll: "انتخاب همه",
    toggleSelectRow: "انتخاب ردیف",
    toggleVisibility: "نمایش",
    ungroupByColumn: "لغو گروه بندی توسط {column}",
    unpin: "پین کردن",
    unpinAll: "از پین در آوردن ",
  },
};

I also tried to add new row number manually but I need some functionalities from the builtin one