todos, tengo un código de interfaz que muestra la tarjeta con forma rectangular pero quiero mostrarla en forma cuadrada, por favor ayuda ya que lo he intentado muchas veces y no cambié a forma cuadrada

 const useStyles = makeStyles({ gridContainer: { paddingLeft: "40px", paddingRight: "40px", // borderWidth:100 }, root: { // minWidth:50, flex:1 }, bullet: { display: "inline-block", margin: "0 2px", transform: "scale(0.8)", }, title: { fontSize: 14, }, pos: { marginBottom: 12, }, }); function Home() { return ( <div> <div> <h1>Product List</h1> </div> <Grid container spacing={4} className={classes.gridContainer} justify="center" > {getData.map((x, index) => { return ( <Grid key={index} item xs={12} sm={6} md={4} style={{ flex: 1, flexDirection: "row", justifyContent: "center", alignItems: "stretch", }} > <Card className={classes.root} variant="outlined"> <CardContent> <Typography className={classes.pos} color="textSecondary"> <center> {x.sku} </center> </Typography> <Typography className={classes.pos} color="textSecondary"> <center> {x.name} </center> </Typography> <Typography className={classes.pos} color="textSecondary"> <center> {x.price} </center> </Typography> </CardContent> </Card> </Grid> ); })} </Grid> </div> ); }

Desde arriba, muestra que la tarjeta se mostrará en forma rectangular.

Salida de corriente

Tengo problemas con el problema del estilo, así que avíseme y corríjame si me equivoco, gracias :)