Want to get data from rails api whenever mui's data grid is rendered per page

Question

I'm facing a problem which user's table rendered super slowly.
Take a look at this code.

def index_all
    all_users = User.all.order('users.created_at DESC')

    render json: all_users,
           include: %i[inflow_souce job_area user_evaluations evaluations]
  end

I would get over 1,000 users and taking to react frontend.
That's why whenever reached user's table, the first rendering would be supper slow. I execute it using useEffect.

useEffect(() => {
    axios
      .get(`${process.env.REACT_APP_ENDPOINT}/admin/working_users`, {
        headers: {
          "access-token": access_token!,
          client: client!,
          uid: uid!,
        },
      })
      .then((response) => {
        console.log(response.data.created_at);
        console.log(response.data);
        setUsers(response.data);
      })
      .catch(() => {
        Cookies.remove("_access_token");
        Cookies.remove("_client");
        Cookies.remove("_uid");
        dispatch(setSessionTimeout(true));
        dispatch(setLoggedIn(false));
        navigate("/");
      });
  }, [selectedTab]);

What I want to do is just calling api per page so that getting rendering faster.
So How can I do that..?.

This is whole programs.

AllUserListPage.tsx

import { Grid } from "@material-ui/core";
import React, { useEffect } from "react";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { usersStyles } from "utils/styles/UsersStyle";
import axios from "axios";
import { useDispatch, useSelector } from "react-redux";
import { setSessionTimeout } from "slices/SessionTimeout";
import { setLoggedIn } from "slices/LoggedIn";
import { useNavigate } from "react-router-dom";
import Cookies from "js-cookie";

type AllUserListPageProps = {
  access_token: string | undefined;
  uid: string | undefined;
  client: string | undefined;
  changeUsers: (users: any) => void;
  rows: any;
  columns: GridColDef[];
};

export function AllUserListPage(props: AllUserListPageProps) {
  const classes = usersStyles();
  const [pageSize, setPageSize] = React.useState(15);
  const dispatch = useDispatch();
  const admin_name = useSelector(setSessionTimeout);
  const navigate = useNavigate();

  useEffect(() => {
    axios
      .get(`${process.env.REACT_APP_ENDPOINT}/admin/all_users`, {
        headers: {
          "access-token": props.access_token!,
          client: props.client!,
          uid: props.uid!,
        },
      })
      .then((response) => {
        console.log(response.data.created_at);
        console.log(response.data);
        props.changeUsers(response.data);
      })
      .catch(() => {
        Cookies.remove("_access_token");
        Cookies.remove("_client");
        Cookies.remove("_uid");
        dispatch(setSessionTimeout(true));
        dispatch(setLoggedIn(false));
        navigate("/");
      });
  }, []);

  return (
    <Grid item xs={12}>
      <div
        style={{
          height: "131vh",
          width: "100%",
          paddingTop: "10px",
        }}
      >
        <DataGrid
          rows={props.rows}
          columns={props.columns}
          checkboxSelection
          className={classes.data_grid_styles}
          pageSize={pageSize}
          rowsPerPageOptions={[15, 30, 50]}
          onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
          onPageChange={(page) => console.log(page)}
        />
      </div>
    </Grid>
  );
}

users_controller.rb

class Admin::UsersController < ApplicationController

def index_all
    all_users = User.all.order('users.created_at DESC')

    render json: all_users,
           include: %i[inflow_souce job_area user_evaluations evaluations]
  end
end

Thank you.