itemRender customizes NOT list-item but <a>, so it doesn't properly support <Link>

I am trying to wrap each pager item into <Link> (from next/link or react-router-dom).

My code is something like following:

<Pagination
    defaultPageSize={perPage}
    itemRender={(current, type, element) => {
        return <Link href={'/base_href/' + current}>{element}</Link>
    }}
    current={page}
    total={total}
    style={{ float: 'right', margin: 0 }}
/>

Expected result:

1. The whole pager is clickable, and makes cursor pointer.
2. The whole pager shows hint "/base_href/..." on mouse over.
3. Clicking each point of pager element causes navigation to the link.

Actual result:

1. The whole pager is clickable, and makes cursor pointer.
2. Pager shows hint "/base_href/..." on mouse over only on its center (digit), but not border.
3. To navigate, user should click pager's center (digit), but not border.

So, it renders as:

<li>
    <Link>
        <a></a>
    </Link>
</li>

but, in order to meet expectations, it should render as:

<Link>
    <li>
        <a></a>
    </li>
</Link>

Or, at least, it should forward <li> click event to <a> element (which will fix No. 3, but not No. 2)

Start at the Pagination itemRender implementation and inspect how the returned element is placed relative to the generated