При добавлении поля к кнопке в пользовательском интерфейсе материала gridlist отменит столбец

Question

Итак, когда у меня нет поля на кнопках, они выровнены правильно. Но когда я помещаю поля на кнопки, они отображаются правильно, но на один столбец меньше. Это не было бы проблемой, так как я мог бы просто добавить дополнительный столбец, но он оставляет пустое место там, где он должен был быть.

<GridList
spacing= {10}
cellHeight= "auto"
cols= {3}>
{this.state.curArray.map((name, i) => (
    <Button
        key= {i}
        variant="contained"
        color= {"primary"}
        style={
            {fontSize: '25px'}
        }    
        size= "large"
        children= {name}
        onClick= {() => {
            this.updateChoices(name);
        }}
    />
    ))}    

Тема mui:

    const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#0cc73e",
    },
    secondary: {
      main: "#ffc400",
    },
    type: "dark"
  },

  overrides: {
    MuiButton:{
      contained:{
        margin: "1px"
      }
    }
  }
});

Это вот как это выглядит при компиляции: 1