Use Volto-built pagination feature

Good morning, Plone community!

I am in the process of using the built-in pagination feature for Volto however, nothing seems to work when I click on the toolbar buttons.

The code I used for the Pagination is below:

<div className="contents-pagination">
        <Pagination
          current={currentPage}
          total={Math.ceil(total / pageSize)}
          pageSize={pageSize}
          pageSizes={[5, 10, 15, 20, 25]}
          onChangePage={onChangePage}
          onChangePageSize={onChangePageSize}
        />
      </div>

And here are the functions I used for the above feature:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Link } from 'react-router-dom';
import { Container, Menu, Table, Modal } from 'semantic-ui-react';
import { searchContent } from '@plone/volto/actions';
import { Pagination } from '@plone/volto/components';
import moment from 'moment';
import PDFViews from '../../PDFViews/PDFViews';
import ContentStatusHistory from '../../ContentStatusHistory/ContentStatusHistory';
import History from '../../History/History';
import SearchWidget from '../../../../../../../omelette/src/components/theme/SearchWidget/SearchWidget';

const ContentListingView = () => {
  const content = useSelector((store) => store.content.data);
  const results = useSelector(
    (state) => state.search.subrequests.content?.items,
  );
  const total = content.items_total;
  const dispatch = useDispatch();
  const [currentPage, setCurrentPage] = React.useState(0);
  const [pageSize, setPageSize] = React.useState(25);
  React.useEffect(() => {
    dispatch(
      searchContent(
        '/',
        {
          meta_type: 'Dexterity Item',
          metadata_fields: '_all',
          b_size: pageSize,
          b_start: currentPage * pageSize,
          fullobjects: true,
        },
        'content',
      ),
    );
  }, [currentPage, dispatch, pageSize]);
  const onChangePage = (event) => {
    event.preventDefault();
    setCurrentPage(event.target.value);
  };
  const onChangePageSize = (event) => {
    event.preventDefault();
    setPageSize(event.target.value);
    setCurrentPage(0);
  };
  return (<Container>..{Pagination Feature Goes In Here!}..</Container>);
};

export default ContentListingView;

Try to follow the API from here, it seems that you don't need to use the event directly, onChangePage callback also gets another object as parameter

Plone Foundation Code of Conduct