I have code like this:

import React, {Component, useState} from "react";
import DataTable from 'react-data-table-component';
import {columns} from "./table-data/data";
import RequestsPagination from "./CustomPagination";

const json = require('../stub/requests-page-1-response.json')

class RequestsPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            requests: [],
            currentPage: 0,
            elementsPerPage: 10,
            totalElements: undefined
        };

        this.fetchData = this.fetchData.bind(this)
    }

    fetchData() {
        const {currentPage, elementsPerPage} = this.state
        fetch(`/api/requests?page=${currentPage}&size=${elementsPerPage}`)
            .then(response => {
                if (response.status !== 200) {
                    throw {
                        error: {
                            status: response.status
                        }
                    }
                } else {
                    //return response.json()
                    return {}
                }
            })
            .then(pageResponse => {
                this.setState(prevState => ({
                    ...prevState,
                    requests: json.requests,
                    totalElements: json.totalElements
                }))
            })
            .catch(error => {
                console.log(error)
                this.setState(prevState => ({
                    ...prevState,
                    response: error
                }))
            })
    }

    componentDidMount() {
        this.fetchData()
    }

    render() {
        return (
            <div>
                {myPagination.call(this)}
            </div>
        )
    }
}

function myPagination() {
    const {currentPage, elementsPerPage, requests, totalElements} = this.state
    return (
        <DataTable
            title={"Все запросы"}
            columns={columns}
            data={requests}
            pagination
            paginationDefaultPage={currentPage}
            paginationTotalRows={totalElements}
            paginationPerPage={elementsPerPage}
            paginationRowsPerPageOptions={[10, 20, 50]}
        />
    )
}

export default RequestsPage;

I keep getting:

Too many re-renders. React limits the number of renders to prevent an infinite loop.

I have tried to initialize the child component inside the render and now outside, tried several examples - no result. Can someone refer me to proper documentation and a simple explanation?

My goal is to create a react table with the smallest amount of code, i.e. using libraries. Later I plan to do pagination, I want to use the property of DataTable

onChangePage={(event, page) => this.fetchData()}