Using Material UI Pagination Component to Paginate Blog Posts

🙋Get Help
1

Hello, I am pretty new to Frontity and Web Development in general so please excuse any lack of perspective I may have.

My issue is effectively using the Material UI component pagination to route through an already paginated blog archive.

import React from 'react'
import { connect, styled } from "frontity"
import Link from "@frontity/components/link"
import { Pagination, PaginationItem } from '@material-ui/lab';


function PaginationComponent( { state, actions, libraries }) {
    const { totalPages } = state.source.get(state.router.link);
    const { path, page, query } = libraries.source.parse(state.router.link)
    
    const isThereNextPage = page < totalPages;
    const isTherePreviousPage = page > 1;

    const nextPageLink = libraries.source.stringify({path, page: page + 1, query});
    const prevPageLink = libraries.source.stringify({path, page: page - 1, query})
    
    
    return (
        <div>
            {isTherePreviousPage && (
                <Link link={prevPageLink}>New Posts</Link>
            ) }
            
            <Pagination
              page={page}
              count={totalPages}
              renderItem={(item) => (
                <PaginationItem
                  component={Link}
                  to={`/blog${page === 1 ? '' : `/page/${page}`}`}
                  {...item}
                />
              )}
            />
            {isThereNextPage && (
                <Link link={nextPageLink}>Older Posts</Link>
            ) }
            
        </div>
    )
}

export default connect(PaginationComponent)

I so far have been able to create pagination and route through the pages using the Link component, through a technique I discovered on this forum. What I would like to do, however, is use the Material UI component for it. I was able find this to help guide me, where it says “Router Intergration”. From there this code is given,

import React from 'react';
import { MemoryRouter, Route } from 'react-router';
import { Link } from 'react-router-dom';
import Pagination from '@material-ui/lab/Pagination';
import PaginationItem from '@material-ui/lab/PaginationItem';

export default function PaginationLink() {
  return (
    <MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
      <Route>
        {({ location }) => {
          const query = new URLSearchParams(location.search);
          const page = parseInt(query.get('page') || '1', 10);
          return (
            <Pagination
              page={page}
              count={10}
              renderItem={(item) => (
                <PaginationItem
                  component={Link}
                  to={`/inbox${item.page === 1 ? '' : `?page=${item.page}`}`}
                  {...item}
                />
              )}
            />
          );
        }}
      </Route>
    </MemoryRouter>
  );
}

My question is how can I adapt this code that uses purely React to work in Frontity? Here is my repo.