title: React Transition Group - i dont understand it well
body: <p>I'm trying to make an array of images that changes image every few seconds.</p>
  <p>I made it change randomly and now I'm trying to add transition so it so it will look prettier.</p>
  <p>The only way I saw it's being possible with React is using react-transition-group.</p>
  <p>so I have made this <code>useEffect</code>:</p>
  <pre><code>const [imageSrc, setImageSrc] = useState(image1);
    const inProp = useRef(true);
  
    const defaultStyle = {
      transition: `opacity 2s ease-in-out`,
      opacity: 0,
    };
  
    const transitionStyles = {
      entering: { opacity: 1 },
      entered: { opacity: 1 },
      exiting: { opacity: 0 },
      exited: { opacity: 0 },
    };
  
    useEffect(() =&gt; {
      const changeImage = () =&gt; {
        const imagesArr = [image1, image2, image3];
        const imagesLength = imagesArr.length;
        let random = Math.floor(Math.random() * imagesLength);
        setImageSrc(imagesArr[random]);
        inProp.current = !inProp.current;
      };
  
      setInterval(changeImage, 6000);
      return () =&gt; {
        clearInterval(changeImage);
      };
    }, []);
  </code></pre>
  <pre><code>     &lt;Transition in={inProp.current} timeout={300}&gt;
                  {(state) =&gt; (
                    &lt;img
                      src={imageSrc}
                      alt=&quot;about-img&quot;
                      className=&quot;about-img&quot;
                      style={{
                        ...defaultStyle,
                        ...transitionStyles[state],
                      }}
                    /&gt;
                  )}
                &lt;/Transition&gt;
  </code></pre>
  <p>also I get this kind of error:</p>
  <p><a href="https://i.stack.imgur.com/rfPAV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rfPAV.png" alt="enter image description here" /></a></p>
  <p>so what happens now it makes transition but not the way I want it.
  I want to make the transition on every change of image.
  maybe you guys can please help me?
  Thanks alot !</p>