Material-UI data grid renders only 101 rows

i have a data grid which gets it's data from an api response then rendering it to server-side rendering and i basically do this SQL query from the database:

select * from orders

this simply selects every row in the orders table which is 350 rows

and in the api response i can see all the 350 rows that got retrieved from the database.

but when i render them in a Material-UI data grid i just get first 101 rows exactly 101.

i searched everywhere and couldn't see if there is a row limit so why is it exactly rendering only 101 rows?

i don't know if it will help but here is my code (i believe i didn't set a row limit if there is one....):

DataTable.js:

import { DataGrid, GridColDef, GridRowsProp } from "@material-ui/data-grid";
import React, { Fragment } from "react";
import { renderSelectEditCell } from "./select-field";

export default function DataTable({ rows0 }) {
  const columns: GridColDef[] = [
    {
      editable: false,
      sortable: false,
      field: "username",
      headerName: "username",
      width: 150,
    },
    {
      editable: true,
      sortable: false,
      field: "order_title",
      headerName: "order_title",
      width: 150,
    },
    {
      editable: true,
      sortable: false,
      field: "order_price",
      headerName: "order_price",
      width: 150,
    },

    {
      editable: true,
      sortable: false,
      field: "date",
      headerName: "date",
      width: 150,
    },
    {
      editable: true,
      sortable: false,
      field: "order_status",
      headerName: "order_status",
      width: 150,
      renderCell: renderSelectEditCell,
      renderEditCell: renderSelectEditCell,
    },
  ];
  
  
  return (
    <Fragment>
      <div style={{ width: imgwidth }}>
        <DataGrid
          hideFooter
          disableSelectionOnClick
          disableDensitySelector
          disableColumnSelector
          disableColumnMenu
          autoHeight
          rows={rows0}
          columns={columns}
        />
      </div>
    </Fragment>
  );
}

Data0.js where i use DataTable:

import { getSession } from "next-auth/client";
import DataTable from "../../components/DataTable";

export default function Data0({ rows0 }) {
  return (
    <Fragment>
      <DataTable rows0={rows0} />
    </Fragment>
  );
}
export async function getServerSideProps(context) {
  const session = await getSession(context);
  if (session) {
    const res = await fetch(
      `${process.env.WEBSITE_URL}/api/orders?user=${session.user.user_id}&test=ff`
    );
    const rows = await res.json();

    return {
      props: {
        rows0: rows,
      },
    };
  } else {
    return {
      props: {},
    };
  }
}