How to test Callback of Material Pagination Element in Functional Component? - reactjs

Question

I'm trying to get full unit test coverage using '#testing-library/react' but am having trouble triggering the callbacks of Material's React Pagination Component. When I simulate a click on the next page button, I still see no coverage of the callback defined in my file. Nor can I replace this callback with a mocked callback because it is defined inside my functional component, so a mocked one cannot be passed in as a parameter. Here's what I've tried so far. Any help is really appreciated.
DataMonitoring.tsx
const DataMonitoring: React.FC<DataMonitoringProps> = ({}: DataMonitoringProps) => {
const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPageIndex: number) => {
console.log("it works"); // not begin logged on simulated click
};
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
console.log("it works"); // not being logged on simulated click
};
return (
<TablePagination
rowsPerPageOptions={[10, 20, 50]}
component="div"
count={10}
page={0}
onPageChange={handleChangePage}
rowsPerPage={4}
onRowsPerPageChange={handleChangeRowsPerPage}
/>
);
};
DataMonitoring.test.tsx
describe('DataMonitoring Pagination Test', () => {
it('handles page onchange', () => {
const mockPageIndex = 0;
const mockPageSize = 0;
const mockTotalObjects = 0;
const { container } = render(
<DataMonitoring/>
);
const nextPageBtn = container.querySelector('[title="Next page"]');
userEvent.click(nextPageBtn);
}
});