lazy loading images inside perfect scroll bar won't work

This issue has been tracked since 2021-01-29.

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?

More Details About Repo
Owner Name twobin
Repo Name react-lazyload
Full Name twobin/react-lazyload
Language JavaScript
Created Date 2015-08-07
Updated Date 2022-11-29
Star Count 5639
Watcher Count 52
Fork Count 482
Issue Count 153

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date