How to show less number of pages on mobile view in Pagination?

Problem

Need to show less number of pages in mobile view so that it can be aligned with heading (My Orders) in the same line.

Library

material-ui/pagination

Progress

Able to remove Next and Previous content in the mobile view but neither able to find any out-of-the-box prop(s) nor any CSS to reduce number of pages in mobile view

Web view

Mobile View

Code

CSS

@media (min-width: 501px) {
.MuiPagination-root {
.MuiPagination-ul {
    flex-wrap: nowrap;
    li {
        &:first-child {
            flex-basis: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            > button::before {
                margin-right: 10px;
                content: "Previous  ";
            }
        }
        &:last-child {
            flex-basis: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            > button::after {
                margin-left: 10px;
                margin-right: 20px;
                content: "  Next";
            }
        }
    }
}
}

Custom Component

    import React, { useState } from "react";
    import PropTypes from "prop-types";
    import Pagination from '@material-ui/lab/Pagination';

    export const CustomPagination = ({ onChange, totalRecords, currentPage, className, shape }) => {
        return (
            <Pagination
                count={totalRecords}
                shape={shape}
                className={className}
                onChange={onChange}
                page={currentPage}
            />
        )
    };

    CustomPagination.propTypes = {
        paginationLength: PropTypes.number,
        selectPage: PropTypes.func,
        activePage: PropTypes.number,
    };