Show only 3 number of pages in custom pagination React js

I have implemented custom pagination in React js which is working perfect. The issue is the I am getting all page no I want to limit that to just 3 at a time

  <div className={['paginationContainer', `${totalNoOfElements >= postPerPage ? "" : "hideDisplay"}`].join(' ')}>
            <span onClick={() => { backPage() }}>
                <IoIosArrowBack className={['arrow', `${currentPage > 0 ? "" : "disableCursor"}`].join(' ')} />
            </span>
            {(() => {
                let numberOfPages = [];
                for (let i = 0; i < totalNoOfPages; i++) {
                        numberOfPages.push(
                            <a key={i}
                                className={["numberPag", `${currentPage === i ? "activePagBtn" : ""}`].join(' ')}
                                onClick={() => handlePageClick(i)}>
                                {i + 1}
                            </a>
                        );
                    }
                    return numberOfPages
            })()}
            <span onClick={() => nextPage()}>
                <IoIosArrowForward className={['arrow', `${currentPage + 1 < totalNoOfPages ? "" : "disableCursor"}`].join(' ')} />
            </span>
        </div>

My page number are being generated in the tag. How can I limit to just 3 at a time and when i click next arrow icon, then it shows the remaining extra pages