React Material UIで正方形のGridを作りたい

実現したいこと

Rails × ReactでWebアプリケーションを作成しています。
Material-UIを導入しており、Gridで正方形のGridを作成したいのですがうまくいきません。

前提

Ruby on Rails
React (TypeScript)
Material-UI

発生している問題・エラーメッセージ

Gridでは横幅を等幅にすることはできますが、Gridのitemを横幅=高さにかんたんにすることができません。
こちらの記事CSSだけで縦横比固定のトリミングされたサムネイルをつくる【内接・外接リサイズ】を参考にCSSで対応しましたが、GridのItemの中身にテキスト要素があるためheight=0にすることで、そのテキスト要素に影響してしまいます。

以下tsxファイル内のCSS該当部分

CSS
1aaaButton: {
2      display: "block",
3      margin: theme.spacing("auto", "auto"),
4      width: "100%",
5      textAlign: "center",
6      boxShadow: "none",
7      //以下を追加
8      height: 0,
9      paddingBottom: '100%',
10    },
11

以下同ファイル内のreturn内のTypeScript部分

TypeScript
1<Grid container alignItems="stretch">
2 <Grid
3   item
4   sm={4}
5   xs={3}
6   direction="row"
7   justify="flex-start"
8   alignItems="flex-start"
9 >
10  <Button
11   className={classes.aaaButton}
12   variant="contained"
13  >
14   <Typography
15     style={{fontSize: "0.8rem", fontWeight: "bold", marginRight: 3, marginTop: "auto"}}>
16     {xxx.aaa_name}
17   </Typography>
18  </Button>
19 </Grid>
20</Grid>