[bug]: Image with transitioning attributes disappears from DOM after 10-15 seconds

[talentlessguy]

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.4.3

What's Wrong?

Animated element (img in this case) dissapears after 10-15 seconds of looped animation.

To Reproduce

Code:

import { useState, useEffect } from "react";
import { animated, useTransition } from "@react-spring/web";

const icons = [
  {
    logoURI:
      "https://cloudflare-ipfs.com/ipfs/bafkreico3pudvsd4j6emdtq4pmyfaat34reoebxyei7tvlpzp5hnec24qa",
    name: "Rainbow"
  },
  {
    logoURI:
      "https://cloudflare-ipfs.com/ipfs/bafkreifsbu7uy4m25t5hty27x7nfrz3ot3wcvlnqwfujom7ax6qmixgciu",
    name: "Gnosis"
  },
  {
    logoURI:
      "https://cloudflare-ipfs.com/ipfs/bafkreic5w3umuv7hz7drgyp6ymmpiqre4cnd36ftsutrrazgrecpvo5rgq",
    name: "Argent"
  }
];

const AnimatedIcon = () => {
  const [iconIndex, setIconIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(
      () => setIconIndex((state) => (state === icons.length - 1 ? 0 : state + 1)),
      2000
    );
    return () => clearInterval(interval);
  }, []);

  const transition = useTransition(iconIndex, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    exitBeforeEnter: true,
    config: { duration: 150 },
    loop: true
  });

  return transition(({ opacity }, item) => (
    <animated.img
      src={icons[item].logoURI}
      key={icons[item].name}
      style={{ height: "34px", width: "34px", opacity }}
    />
  ));
};

export default function App() {
  return <AnimatedIcon />
}

Expected Behaviour

Animated element should not dissapear from the DOM. It should continue it's looped animation.

Link to repo

https://codesandbox.io/s/nervous-shaw-zw946n?file=/src/App.js:0-1507