Transition element both parent & child while it's hover with framer motion

const imageHover = {
  rest: {
    scale: 0,
    transition: { duration: 2, type: "tween", ease: "easeIn" }
  },
  hover: {
    scale: 1.2,
    transition: { duration: 0.5, type: "tween", ease: "easeOut" }
  }
};

 <ImageList
            variant="quilted"
            cols={4}
            rowHeight={300}
            gap={15}
            initial="rest"
            whilehover="hover"
            animate="rest"
          >
            {itemData.map((item) => (
              <ImageListItem
                key={item.img}
                cols={item.cols || 1}
                rows={item.rows || 1}
                sx={{
                  overflow: "hidden"
                }}
                component={motion.div}
                variants={imageHover}
              >
                <motion.img
                  {...srcset(item.img, 300, item.rows, item.cols)}
                  alt={item.title}
                  loading="lazy"
                  height={item.rows === 2 ? 620 : 300}
                  variants={imageHover}
                />

                <ImageListItemBar
                  sx={{
                    background: "transparent",
                    "& .MuiImageListItemBar-title": {
                      fontSize: "20px",
                      textTransform: "uppercase",
                      color: "#333"
                    }
                  }}
                  title={item.title}
                  position="bottom"
                  actionPosition="left"
                  component={motion.div}
                  variants={imageHover}
                />
              </ImageListItem>
            ))}
          </ImageList>