issue with material ui components responsiveness - reactjs

Question

I am trying to use matrial ui elements,but my issue is that it is not responsive. I want to show 2
items on medium screen and just 1 on small ones, but it is 3 on all screens. thx
this is the parent component and I prop drill the array's elements to the child component
import * as React from "react";
import Box from "#mui/material/Box";
import ImageList from "#mui/material/ImageList";
import ImageListItem from "#mui/material/ImageListItem";
import ImageListItemBar from "#mui/material/ImageListItemBar";
import InfiniteScroll from "react-infinite-scroll-component";
import Grid from "#mui/material/Grid";
import ProductListItem from "./ProductListItem";
const ProductList = ({ products }) => {
return (
<>
<div className="mr-5 ml-5">
<Box>
<ImageList variant="masonry" cols={3} gap={18}>
{products.map((item) => (
<ProductListItem
item={item}
key={item.id}
/>
))}
</ImageList>
</Box>
</div>
</>
);
};
export default ProductList;
this is the child component for each element of array
import React, { useState, useEffect } from "react";
import Heart from "react-heart";
import { useLocalStorage } from "./storage.js";
import ImageListItem from "#mui/material/ImageListItem";
import ImageListItemBar from "#mui/material/ImageListItemBar";
import ImageList from "#mui/material/ImageList";
const ProductListItem = (props) => {
return (
<>
<ImageListItem>
<img
src={`${props.item.img_src}?w=248&fit=crop&auto=format`}
srcSet={`${props.item.img_src}?w=248&fit=crop&auto=format&dpr=2 2x`}
alt={props.item.title}
loading="lazy"
/>
<div style={{ width: "2rem" }} className="ml-2 mt-2">
<Heart />
</div>
<ImageListItemBar
subtitle={<span>by: aaaaaaaaaaaa</span>}
position="below"
align="right"
/>
</ImageListItem>
</>
);
};
export default ProductListItem;