React.js implement pagination on MUI DataGrid

Question

I've an api that take there params { pageNum, tasksPerPage } and then return the following, The problem is that I only managed to display the 10 tasks in one page and without a next or page numbers cause it only fetch 10 tasks from the API.

// Page=1, tasksPerPage=1
{
  "results": [ 
    {
      "id": 1,
      "task": 'Test title',
      "status": "active",
    }
  ]
}

    const [tableData, setTableData] = useState([])
    const [page,setPage]=useState(0);
    const [tasksPerPage,settasksPerPage]=useState(10);

    const handleChangePage = (page,details) => {
        setPage(page+1);
    };
    const handleChangeRowsPerPage = (pageSize) => {
        setItemsPerPage(parseInt(pageSize, 10));
        setPage(1);
    };
    
    
    useEffect(() => {
        axios.get('https://api.instantwebtools.net/v1/passenger?page=0&size=3',{
            params : {page, size}
        }).then(response => setTableData(response.data.results))
        
    }, [page,tasksPerPage])


<DataGrid
    rowHeight={80}
    autoHeight
    rows={tableData}
    columns={columns}
    pageSize={tasksPerPage}
    rowsPerPageOptions={[5,10,20]}
    checkboxSelection
    getRowId={row => row._id}
    loading={tableData.length === 0}
    EnableRowVirtualization="True"
    onPageChange={handleChangePage}
    onPageSizeChange={handleChangeRowsPerPage}
    page={page}
/>