reactjs – The React table loads all data at one time instead of server-side paging

I use the 6.9.2 version of react-table to connect to an API and display the data. I am the base of this example:

https://github.com/tannerlinsley/react-table/tree/v6#server-side-data

The problem I am currently facing is that the API loads all data while loading the application, which is not ideal. I'm trying to enable server-side paging so that it loads 10 lines per page, but that does not seem to work because every 100 lines are loaded when the application starts.

Current code:

    {
// show the loading overlay
this.setState ({loading: true});
// get your data
axios
.get ("https://jsonplaceholder.typicode.com/posts", {
page: state.page,
pageSize: state.pageSize,
sorted: state.sorted,
filtered: state.filterd
})
.then (res => {
// Update the reaction table
this.setState ({
posts: res.data,
data: res.data,
page: state.page,
pages: res.data.pages,
loading: fake
});
});
}}
columns = {columns}
data = {this.state.data}
pages = {this.state.pages}
load = {this.state.loading}
filterable
defaultPageSize = {10}
noDataText = {"Loading ..."}
manual // informs React Table that you will handle server-side sorting and paging
/>

The defaultPageSize = {10} option is not applied. When I remove the manual property, it works, but when you click each page, it asks for every 100 rows each time.

My current sandbox is here: https://codesandbox.io/s/v0vr0jqmwy

I've been stuck on this for centuries and it drives me crazy!