InlineImage block only updates to correct image on page refresh

Hi! Was updating an old project with the new Media Manager api (which is awesome btw!) and it seems as though the rendered image from my <InlineImage> block is a step behind the actual state. To get the current image you have to refresh the page. Possibly related to this issue? Surface-wise at least, the behavior is the same.

  • The JSON data updates on the backend
  • Getting a Warning: Each child in a list should have a unique "key" prop. in console each time I click image to update file. (Not sure if even related, but figured I’d mention)
  • Code from my block component below. Am I passing previewSrc the correct way?

cover.js

function Cover({ index, ...data }) {
  return (
    <div className={Styles.container}>
      <div className={Styles.cover}>
        <InlineImage
          name="cover_image"
          parse={media => `../assets/${media.filename}`}
          uploadDir={() => "./content/assets/"}
          previewSrc={(src, fieldPath, formValues) => {
            const preview =
            formValues.jsonNode.blocks[index].cover_image.childImageSharp
                .fluid
            return preview
          }}
          focusRing={false}
        >
          {props => (
            <Img
              fluid={props.src || data.cover_image.childImageSharp.fluid}
              alt="Text Cover"
            />
          )}
        </InlineImage>
      </div>
    </div>
  )
}

export const coverBlock = {
  Component: ({ index, data }) => (
    <BlocksControls
      index={index}
      focusRing={{ offset: 0, borderRadius: 0 }}
      insetControls
    >
      <Cover index={index} {...data} />
    </BlocksControls>
  ),
  template: {
    label: "Cover",
    defaultItem: {
      _template: "cover",
      cover_image: "../assets/default.jpg",
    }
  }
}