how to implement a load more button in the pagination of react data table component

Question

I'm using the react data table component to display data obtained from CoinCap API. What I need to do is to customize the pagination and add a "load more" button that adds another 40 rows of data under the previous rows when clicked.

I set the limit to the maximum allowed by the api (2000) and offset to 0 since I don't want any data to get eliminated from the top of the table. The table doesn't seem to update rowsPerPage when I click the button and the loadMore function is executed. I'm probably missing something here.
Any help is appreciated.

Also the reason I set the limit to 2000 is that I want the table to sort all the data on its different columns and not just the visible data shown on the table at the time.
(When I set limit to a small number, the sort function of react table component only sorts the limited number of data the table is showing.)

export default function CoinsList(props) {
    const [rowsPerPage, setRowsPerPage] = useState(20);
    const {currencyRate, currencySymbol} = props;
    const [coins, setCoins] = useState([]);
    const [limit, setLimit] = useState(2000);
    const [offset, setOffset] = useState(0);
    const [loading, setLoading] = useState(false);

    function getApi() {
        setLoading(true);
        axios.get("https://api.coincap.io/v2/assets", { params: { limit, offset} }).then(function(response){
            setCoins(response.data.data);
            // console.log(response.data.data);
            setLoading(false);
        })
    };
    useEffect(function() {
        getApi();
    }, [rowsPerPage]);

    function loadMore() {
        setRowsPerPage(rowsPerPage + 40);
    };

    function CustomPagination() {
        return (
            <button className="green" onClick={loadMore} disabled={loading}>
                {loading === true ?
                    <Spinner animation="border" variant="light" size="sm" role="status"></Spinner>
                    :
                    "View More"
                }
            </button>
        )
    };

    return (
        <div className="coins-list">
            <div className="container">
                <div className="box">
                    <DataTable
                        columns={columns} data={coins}
                        customStyles={customStyles} defaultSortFieldId={1}
                        pagination
                        paginationComponent={CustomPagination}
                        paginationPerPage={rowsPerPage}
                    />
                </div>
            </div>
        </div>
    );