How to set Material-UI breakpoint for small, medium, and large screen with `useMediaQuery`

I am working on a React application that has Events. I have managed to make my events list to set to 3 cols on a large screen and 1 col on xs screen. Now, what I want to do is to make my events list show 2 cols on a medium screen.

Show 3 cols on a big screen, 2 cols on medium screen, and 1 cols on xs screen.

This is my Component breaking point

  const matches = useMediaQuery(theme.breakpoints.down("xs"));


return (
<div className={classes.root}>
  <GridList
    cellHeight={420}
    className={classes.gridList}
    spacing={12}
    cols={matches ? 1 : 3}
  >
    {tileData.map((event, key) => {
      return (
        <Card
          style={{
            marginBottom: "2rem",
            textDecoration: "none",
          }}
          component={Link}
          to={"/events/" + event._id + "/eventcomments"}
          key={Math.floor(Math.random() * new Date().getTime())}
        >
          <h3
            style={{
              background: " #800000",
              color: "white",
              textAlign: "center",
            }}
            className={classes.cardheader}
          >
            {event.title}
          </h3>

          <CardHeader
            avatar={
              <Avatar aria-label="recipe" className={classes.avatar}>
                CB
              </Avatar>
            }
            title={getTitle(
              Date.parse(event.startingDate),
              Date.parse(event.closingDate)
            )}
            subheader={getEnded(
              Date.parse(event.startingDate),
              Date.parse(event.closingDate)
            )}
            style={{ background: "#DCDCDC" }}
          />
          <CardMedia
            className={classes.media}
            image={event.eventImage}
            title="Paella dish"
          />
          <CardContent>
            <Typography
              style={{ color: "black", fontSize: "16px" }}
              variant="body2"
              color="textSecondary"
              component="p"
            >
              {event.description.substring(0, 100)}....
            </Typography>
          </CardContent>
        </Card>
      );
    })}
    ;
  </GridList>
</div>
);