how to make global checkbox depend on the page size dropdown value of MUI DataGrid table

Question

i am using react 18 with @mui (material ui) v5 and trying to implement DataGrid table for that i needed global checkbox column,pagenation and page size drop down.

coming to issue if i have 500 rows data and page size is 100 then i will have 5 pages but if i select the global checkbox it should select the corresponding page rows only i.e 100 but it selecting 500 entries

so Please help me how to global checkbox hook up with page size drop down. and also how to add background color to table header

Thanks

demo code:

import * as React from "react";
import { DataGrid } from "@mui/x-data-grid";
import { useDemoData } from "@mui/x-data-grid-generator";

export default function ControlledSelectionGrid() {
  const { data } = useDemoData({
    dataSet: "Commodity",
    rowLength: 500,
    maxColumns: 6,
  });

  const [rowSelectionModel, setRowSelectionModel] = React.useState([]);

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        checkboxSelection
        onRowSelectionModelChange={(newRowSelectionModel) => {
          setRowSelectionModel(newRowSelectionModel);
        }}
        rowSelectionModel={rowSelectionModel}
        {...data}
      />
    </div>
  );
}