Pagination component structure question

PaginationBar.tsx

interface PaginationBarProps {
    pageCount: number,
    currentPage: number,
    onPageItemClicked: (page: number) => void,
}

const PaginationBar = ({ pageCount, currentPage, onPageItemClicked }: PaginationBarProps) => {

    const paginationMinPage = Math.max(1, currentPage - 5);
    const paginationMaxPage = Math.min(pageCount, Math.max(currentPage + 4, 10));

    const numberedPageItems: JSX.Element[] = [];

    for (let i = paginationMinPage; i <= paginationMaxPage; i++) {
        let paginationItem: JSX.Element;

        if (i === currentPage) {
            const currentPageItemSizeMdOnly = <Pagination.Item active className='d-none d-md-block' key={i}>{i}</Pagination.Item>
            const currentPageItemSizeSmOnly = <Pagination.Item active className='d-sm-block d-md-none' key={i + "-mobile"}>Page: {i}</Pagination.Item>

            paginationItem =
                <>
                    {currentPageItemSizeMdOnly}
                    {currentPageItemSizeSmOnly}
                </>
        } else {
            paginationItem =
                <Pagination.Item
                    key={i}
                    className='d-none d-md-block'
                    onClick={() => onPageItemClicked(i)}>
                    {i}
                </Pagination.Item>
        }
        numberedPageItems.push(paginationItem);
    }

    return (
        <Pagination className="mt-4">
            {currentPage > 1 &&
                <>
                    <Pagination.First onClick={() => onPageItemClicked(1)} key="first" />
                    <Pagination.Prev onClick={() => onPageItemClicked(Math.max(currentPage - 1, 1))} key="prev" />
                </>
            }
            {numberedPageItems}
            {currentPage < pageCount &&
                <>
                    <Pagination.Next onClick={() => onPageItemClicked(Math.min(currentPage + 1, pageCount))} key="next" />
                    <Pagination.Last onClick={() => onPageItemClicked(pageCount)} key="last" />
                </>
            }
        </Pagination>
    );
}

export default PaginationBar;