issue with material ui components responsiveness

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;