everyone, i have a frontend code that displaying card with rectangular but i want to display it in square, please help since i have tried so many time and didn't change to square

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>
  );
}

From above, it shows that card will display in rectangular

Current output

I'm struggle with the styling issue so please advise and correct me if i'm wrong, thanks :)