gatsby-image-plugin unexpected behaviour

[popeating]

Hello before totally migrating to the new gatsby-image-plugin, i tried a couple of tests:

in a simple Gatsby page i load (via graphql) a bunch of image and i display with GatsbyImage a random one (simply by using a random index number), then i added a link that change the number (the number is a State Hook, so i was expecting the image component to update, with the new image, instead after a couple of clicks (usually the second one) i got the following error:
Warning: render(...): It looks like the React-rendered content of this container was removed without using React. This is not supported and will cause errors. Instead, call ReactDOM.unmountComponentAtNode to empty a container.
inspecting the generatad html the GatsbyImage components renders:
a wrapper div, inside it a div containing the image placeholder, and the picture tag that contains the image.
what happen on my click is that all the rendered component is updated, beside the div with the placeholder, and i guess that is this div appearing and disappearing that broke the page.
In any case this is my basic page

import React, { useState } from 'react';
import { graphql } from 'gatsby';
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
const Test = ({ data }) => {
  const dochange = () => {
    console.log('change');
    setNum(Math.floor(Math.random() * (10 - 20)) + 20);
  };
  const [num, setNum] = useState(Math.floor(Math.random() * (10 - 20)) + 20);
  console.log(data.allFile.edges[num].node);
  const myimage = getImage(data.allFile.edges[num].node);
  console.log(myimage);
  return (
    <div>
      <GatsbyImage image={myimage} alt="test" />
      <a href="#" onClick={dochange}>
        change
      </a>
    </div>
  );
};

export const pquery = graphql`
  query {
    allFile(filter: { relativePath: { regex: "/p//" } }) {
      edges {
        node {
          childImageSharp {
            gatsbyImageData(formats: [AUTO, WEBP, AVIF], width: 400)
          }
        }
      }
    }
  }
`;

export default Test;

what am i missing?

[lev-savranskiy]

hi, i am having same issue #30052

subscribing for updates here

[laurieontech]

Thanks for raising this. Was able to reproduce and we're looking into it.

[popeating]

it is also here
#29982

[rossneilson]

Just thought I would mention, I am having the same issue so subscribing here for updates.
My use case is displaying certain images from an array based on user specified filters and I get this error whenever anything changes and new images are rendered.

[laurieontech]

PR #30221 addresses this issue. It's now available in gatsby-plugin-image@next

[rossneilson]

Works great now, thank you!
@laurieontech Not sure if it is related to this change but 1.2.0-next.1 seems to have an issue with images on chrome+safari being blurred and not fully rendering
Seems to occur only when building and serving in production not in develop mode