How to enable button when row is selected in MUI X Data Grid?

How do I make my button state enabled when I click a checkbox in MUI X Data Grid? Sample Image I want to enable the approve button once the user has clicked checkbox.

const [approveState, setApproveStatee] = useState({
    disabled: true,
  });
<Button
            variant="contained"
            color="primary"
            disabled={approveState.disabled}
            sx={{ mb: 1 }}
            // onclick={handleApproveAll}
          >
            Approve
          </Button>
<div style={{ height: 400, width: "100%" }}>
          <DataGrid
            rows={rows}
            columns={columns}
            pageSize={5}
            rowsPerPageOptions={[5]}
            checkboxSelection
          />
        </div>

The second way to use the onSelectionModelChange prop of the DataGrid you can find out an example here link:

import * as React from "react";
import { DataGrid } from "@material-ui/data-grid";
import { useDemoData } from "@material-ui/x-grid-data-generator";
import { Button } from "@material-ui/core";

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

  const [approveState, setApproveStatee] = React.useState([]);

  return (
    <>
      <Button
        variant="contained"
        color="primary"
        disabled={!approveState.length}
        sx={{ mb: 1 }}
        // onclick={handleApproveAll}
      >
        Approve
      </Button>
      <div style={{ height: 400, width: "100%" }}>
        <DataGrid
          {...data}
          pageSize={5}
          rowsPerPageOptions={[5]}
          checkboxSelection
          onSelectionModelChange={(newSelectionModel) => {
            setApproveStatee(newSelectionModel);
          }}
        />
      </div>
    </>
  );
}