GatsbyImage acting funny

[svanetten1976]

Hi, running into an unexpected and intermittent issue with gatsby-plugin-image and GatsbyImage on mobile devices only. Essentially I work with images of many different orientations for desktop, tablet and mobile. Knowing that withArtDirection does not support images of different aspect ratios for creating responsive images (which is honestly a badly lacking feature), I cooked up a generally working solution that involves building the image prop in state using withArtDirection, based on changes in screen width and then feed in the updated image prop into GatsbyImage. If the image which was landscape on desktop and portrait on mobile, the image will get cut off but I resolved that by dynamically updating the key of the GatsbyImage component to force a re-render. This actually works great on desktop and mostly on mobile. I say mostly because intermittently re-keying the GatsbyImage component on mobile will result in the component rendering without a picture element in in like so...

These are the relevant bits of code that result in this intermittent error:

const getWthArtDirection = memoizeFn(
    (
        desktopImage,
        mobileImage,
        tabletImage,
        isMobileView,
        isTabletView,
        artImages = []
    ) => {
        if (mobileImage && isMobileView) {
            return withArtDirection(mobileImage, artImages);
        }

        if (tabletImage && isTabletView) {
            return withArtDirection(tabletImage, artImages);
        }

        return withArtDirection(desktopImage, artImages);
    },
    { comparators }
);

const handleResizeUpdate = debounce(
        (wrapperHeight, wrapperWidth, naturalHeight, naturalWidth) => {
            if (
                wrapperWidth &&
                wrapperHeight &&
                naturalWidth &&
                naturalHeight &&
                _isMounted
            ) {
                const minHeightNeeded =
                    (naturalHeight / naturalWidth) * wrapperWidth;

                if (
                    Math.floor(wrapperHeight) < Math.floor(minHeightNeeded) &&
                    _isMounted
                ) {
                    updateImageKey();
                }
            }
        },
        300
    );

^^Note: wrapperHeight refers to the rendered height of the gatsby-image-wrapper div

<GatsbyImage
    image={gatsbyImages}
    alt={altText}
    className={`gatsby-image-wrapper-${contentfulId} ${classes}`}
    imgClassName={`gatsby-image-${contentfulId}`}
     loading={loading}
     key={key}
      style={gatsbyImageStyle}
 />

Any ideas? Surprised that I have to re-key the GatsbyImage component at all when I feed it updated image props. It doesn't seem to update dimensions on its own when being fed a new image prop.

Running Gatsby 4.25.4 and gatsby-plugin-image 2.25.0

Thanks -- Steve