React Material UI GridList cells don't wrap correctly

when using Material-UI GridList the cells doesnt wrap "correctly" in the grid. when diving in the css I noticed that it uses flex-wrap which is suppose to flex rows but I'm sure there is a way to use this component with an option to fill all the blank spaces.

code:

const useStyles = makeStyles((theme) => ({
root: {
  display: "flex",
  flexWrap: "wrap",
  justifyContent: "space-around",
  overflow: "hidden",
  backgroundColor: theme.palette.background.paper,
  paddingTop: theme.spacing(4),
},
gridList: {
  width: 500,
  height: '100%',
},
listItem: {
  borderRadius: theme.borderRadius['secondary'],
  overflow: "hidden",
},
}));

function Gallery(props) {
  const styles = useStyles();
  const cols = [
  [2, 2],
  [1, 2],
  [1, 2],
  [2, 1],
  [1, 1],
  [1, 1],
  [1, 1],
];

const renderItem = (tile, index) => (
  <GridListTile
    classes=
    key={tile.image}
    cols={cols[index % cols.length][0]}
    rows={cols[index % cols.length][1]}
  >
    <img src={tile.image} alt={tile.title} />
  </GridListTile>
);
return (
  <div className={styles.root}>
    <GridList
      cellHeight={160}
      className={styles.gridList}
      cols={3}
      spacing={10}
    >
      {data.items.map(renderItem)}
    </GridList>
  </div>
);
}

I appreciate the help

from React Material UI GridList cells don't wrap correctly