Material-ui react grid - how to change pagination bottom toolbar label

Question

Current datagrid implementation shows: - of totalrows

Above design is default in Datagrid. Using datagrid from

"@mui/x-data-grid": "latest",

import { DataGrid , GridOverlay} from "@mui/x-data-grid";

needed below design instead

code :

const [pageState, setPageState] = useState({
    page: 0, //TODO: need to change 
    pageSize: DEFAULT_PAGESIZE,//TODO: need to change 
  });
<DataGrid
          pagination
          rowCount={count}
          {...pageState}
          loading={isLoading}
          rows={rowsData}
          paginationMode="server"
          columns={columns}
          onRowClick={handleCellClick}
          onPageChange={(page) => setPageState((prev) => ({ ...prev, page }))}
          onPageSizeChange={(pageSize) =>
            setPageState((prev) => ({ ...prev, pageSize }))
          }
          components={{
            NoRowsOverlay: customNoRowsOverlay,
            Toolbar: DashboardSearchBar
          }}
          componentsProps={{
            toolbar: {
              value: "",
              filtersData: filtersData,
              onChange: handleChange,
              orderStatuses: masterData?.orderStatuses,
              clearSearch: () => handleChange("orderAutoId", ""),
              applyFilter: applyFilter,
              clearFilter: clearFilter,
              isFilterApplied: isFilterApplied
            },
          }}
        />

Any help appreciated