react-lazyload: forceCheck doesnt load items that are already in viewport

Current implementation:

/**
*
* CoverPhoto
*
*/

import React from 'react';
import classnames from 'classnames/bind';
import DebugHelper from 'utils/debug';
import LazyLoad, { forceCheck } from 'react-lazyload';
import styles from './CoverPhoto.styl';

const cx = classnames.bind(styles);
const debug = new DebugHelper('components/CoverPhoto');

export class CoverPhoto extends React.Component {
  componentDidMount () {
    forceCheck();
  }

  render () {
// const CoverPhoto = (props) => {
    debug('render');
    const { props } = this;
    const className = cx(props.className, {
      coverPhoto: true,
      hasRatio: props.ratio,
      [`ratio-${props.ratio}`]: props.ratio,
    });
    const imgProps = {
      src: props.src,
      alt: props.alt,
    };

    return (
      <div className={className}>
        <LazyLoad
          height={props.height || 100}
          offset={300}
          once
        >
          <img
            {...imgProps}
            className={styles.photo}
            role="presentation"
          />
        </LazyLoad>
      </div>
    );
  }
}

export default CoverPhoto;

CoverPhoto is then used in other components, like a ProductCard:

Though forceCheck is called, the image is not loaded even though ProductCard is already inside the viewport.

By looking at the log, somehow componentDidMount is being called before render(). Is that becuase the component is not fully mounted till LazyLoad finish rendering? Any hint on how this can be?