MUI breakpoints not working with an expandable drawer - reactjs

Question

So i have a drawer, and ive modified it with a default width of 450px, and a max width 0f 800px. I have xs set 6, and sm set to 4. But it doesnt change. It sets it to 4, and remains, no matter if i expand it to 800, or 450.
<Box>
<Grid container spacing={2} sx={{padding:'20px'}}>
{catalog.map((item, key) => {
return (
<Grid xs={6} sm={4} key={key}>
<Card className="media-catalog-item" sx={{height:'250px'}}>
<CardContent sx={{padding:'0px'}}>
<div className="media-item-title">{item.info.label}</div>
<div onClick={()=>{clickMedia(item)}}>
<img src={"https://example.com" + item.overlay}></img>
<img src={"https://example.com" + item.thumbnail}></img>
</div>
<div className= {list ? "list-item-footer" : "grid-item-footer"}>{item.info.displayName}</div>
</CardContent>
<CardActions>
<Button onClick={() => {notesOperations(item)}}>Notes</Button>
<Button onClick={() => {keywordsOperations(item)}}>Keywords</Button>
</CardActions>
</Card>
</Grid>
)
})}
</Grid>
</Box>
So it should start at 2 items on a row, and as i expand up to 600px+, switch to 3 on a row.
this is using MUI grid v2. Should I just use the regular grid and add item?

Answer 1

You missed to add item property to the Grid
<Box>
<Grid container spacing={2} sx={{padding:'20px'}}>
{catalog.map((item, key) => {
return (
// here you missed the item props
<Grid item xs={6} sm={4} key={key}>
<Card className="media-catalog-item" sx={{height:'250px'}}>
<CardContent sx={{padding:'0px'}}>
<div className="media-item-title">{item.info.label}</div>
<div onClick={()=>{clickMedia(item)}}>
<img src={"https://example.com" + item.overlay}></img>
<img src={"https://example.com" + item.thumbnail}></img>
</div>
<div className= {list ? "list-item-footer" : "grid-item-footer"}>{item.info.displayName}</div>
</CardContent>
<CardActions>
<Button onClick={() => {notesOperations(item)}}>Notes</Button>
<Button onClick={() => {keywordsOperations(item)}}>Keywords</Button>
</CardActions>
</Card>
</Grid>
)
})}
</Grid>
</Box>