[Material-UI] ループ処理で生成したボタンのうちどれがクリックされたのかをハンドラー側で分かるようにする

$ npm list --depth=0
...
├── @material-ui/core@4.12.2
├── react@17.0.2
├── typescript@4.2.4
...

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles((theme) => ({
  typography: {
    marginTop: theme.spacing(20),
    marginBottom: theme.spacing(10),
  },
  grid: {
    margin: "auto",
  },
  button: {
    marginTop: "auto",
    marginBottom: theme.spacing(5),
    width: "250px",
    height: "200px",
    fontSize: "30px",
    margin: theme.spacing(1),
  },
}));

const questionText = "今日の会社説明会はどうでしたか？";
const choices = ["とても満足", "満足", "普通", "不満", "とても不満"];

//クリックハンドラー
const onClickHandler = (index: number) => {
  window.alert(index + 1);
};

const App: React.FC = () => {
  const classes = useStyles();

  return (
    <div>
      <Typography variant="h2" align="center" className={classes.typography}>
        <div>{questionText}</div>
      </Typography>
      <Grid container>
        {choices.map((choice, index) => (
          <Grid item className={classes.grid}>
            <Button
              variant="contained"
              color="primary"
              className={classes.button}
              onClick={() => onClickHandler(index)}
            >
              {index + 1 + ". " + choice}
            </Button>
          </Grid>
        ))}
      </Grid>
    </div>
  );
};

export default App;

const App: React.FC = () => {
  const classes = useStyles();

  return (
    <div>
      <Typography variant="h2" align="center" className={classes.typography}>
        <div>{questionText}</div>
      </Typography>
      <Grid container>
        {choices.map((choice, index) => (
          <Grid item className={classes.grid}>
            <button onClick={() => onClickHandler(index)}>
              {index + 1 + ". " + choice}
            </button>
          </Grid>
        ))}
      </Grid>
    </div>
  );
};