lazy loading images inside perfect scroll bar won't work

[hotcakedev628]

I am using react-perfect-scrollbar to show images list. Inside the perfect scroll bar, I am going to lazy load images inside it. But it won't work.

          <PerfectScrollbar options={{ suppressScrollX: true }}>
            <List className={classes.list}>
              {images.map((image, i) => (
                <ListItem
                  divider={i < images.length - 1}
                  key={i}
                  className={classes.listItem}
                >
                  <ListItemIcon>
                    <LazyLoad height={90} key={i} overflow>
                      <img
                        src={`${awsS3Url}/${image.Key}`}
                        className={classes.listImage}
                        onClick={() => onSelect(`${awsS3Url}/${image.Key}`)}
                      />
                    </LazyLoad>
                  </ListItemIcon>
                  <ListItemText
                    primary={GetFilename(image.Key)}
                    primaryTypographyProps={{ variant: 'h5' }}
                    secondary={bytesToSize(image.Size)}
                    className={classes.listItemText}
                  />
                    <MoreButton
                      handleArchive={() => handleRemoveOne(image)}
                    />
                </ListItem>
              ))}
            </List>
          </PerfectScrollbar>

The images of first view(without action scrolling) are showing. When I try to scroll, then it shows only list without images.

What did I code wrong?