Cypress test seems to 'ignore' mat-paginator pageSize

I am trying to solve a bug in an integration test, which should test if switching between pages using mat-paginator is working correctly. The paginator has a pageSize of 20, the response fixture contains 24 'items'. I expect to see 20 table rows, an enabled 'next' button and the remaining 4 rows when I click on that button. It works fine in the application, but when I run the test, it seems as if the pageSize is ignored. The 'next' button is disabled, the paginator says 'Page 1 of 1' and all 24 items are shown.

The error I get is Timed out retrying: cy.click() failed because this element is disabled, which makes sense because there's only one page instead of two.

I tried different things such as changing the amount of items and changing the pageSize in both the actual code of the application and inspecting the element in the test window (Chrome 84).

These are the test and the paginator (I did remove some code that doesn't apply to this problem)

Test

cy.route({ method: 'POST', url: '**/graphql', response: manyItems }).as('manyItems');
cy.visit('/items');
cy.wait(['@manyItems'], { requestTimeout: 10000 });
cy.get('.mat-paginator').find('button.mat-paginator-next').click();

Paginator

<mat-paginator [pageSize]="20" [hidePageSize]="true" *ngIf="dataSource.length > 0"></mat-paginator>

Is there a way to fix this?