How to test if lazy loaded component is present using react testing library?

I am using the 'react-lazyload' package to lazy load a component that renders images and I would like to write a test using react testing library that would check if the images are present when the user scrolls to the desired viewport.

I am using fireEvent to fire a scroll event so I can assert if my images are visible however the test fails. I'm still getting the hang of testing library so not sure where I am going wrong, any help would be appreciated.

//Lazyloaded component that is part of parent component

  ....
  <LazyLoad offset={950}>
    <ImageWrapper>
      <picture>
        <source type="image/webp" srcSet={heroImageWebp} />
        <source type="image/png" srcSet={heroImagePng} />
        <img src={heroImagePng} alt={'product-showcase'} />
      </picture>
      <AnimationWrapper>
        <MobileReaderAnimation
          animate={mobileReaderAnimationVisibility}
          initial={'hidden'}
          animations={animationsEnabled}
        />
      </AnimationWrapper>
    </ImageWrapper>
  </LazyLoad>
  ....

//test file

  it('should show images on scroll', async () => {
    renderComponent(defaultProps);
    console.log('window.scrollY', window.scrollY); //0

    fireEvent.scroll(window, { target: { scrollY: 1500 } });

    console.log('window.scrollY', window.scrollY);//1500

    expect(await screen.findByAltText('product-showcase')).toBeVisible();
  });