Exit animation not working with TransitionGroup

Question

I am trying to implement a next and previous button for an image gallery. The button works fine but when i try to implement animation for when the image enter and exit, only the enter animation is working. The exit animation where the image need to slide out is not working. I tried reading through the documentation and cant seem to find what is wrong with my implementation. This is my first time using the library.

Gif to show how the current animation is working : example

Here is the React Component:

function ImageScroller({ postId: PostId, username }) {
  const [images, setImages] = useState([]);
  const [currentImgIndex, setcurrentImgIndex] = useState(0);
  const [imgArrLength, setimgArrLength] = useState(0);
  const [isNext, setIsNext] = useState(true);

  useEffect(() => {
    let allImgList = [];
    const feedsSvc = FeedsSvc(username);
    allImgList = feedsSvc.getImages(PostId);
    allImgList = allImgList.map((item,index)=>{
      return({        
        pic : item.pic,
        postId : item.postId,
        nodeRef : createRef(null)}

      )
    })

    setImages(allImgList);
    setimgArrLength(allImgList.length);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  function clickNext() {
    setIsNext(true);
    setcurrentImgIndex(
      currentImgIndex === imgArrLength - 1 ? 0 : currentImgIndex + 1
    );
   
  }

  function clickPrevious() {
    setIsNext(false);
    setcurrentImgIndex((prevIndex) =>
      prevIndex === 0 ? imgArrLength - 1 : prevIndex - 1
    );

  }

  return (
    <div className="ImageScrollerContainer">
      <div className="ImageScrollerContent">
        {imgArrLength > 1 && (
          <>
            <div className="imgBtnPrevContainer">
              <img
                alt="previous button"
                src={previousIcon}
                onClick={clickPrevious}
              />
            </div>
            <div className="imgBtnNextContainer">
              <img alt="next button" src={nextIcon} onClick={clickNext} />
            </div>
          </>
        )}
        <TransitionGroup component={null} childFactory={child => React.cloneElement(child, { classNames: isNext ? "right-to-left" : "left-to-right", timeout: 1000 })}>
          {images.map((img, i) => {
            return (
              i === currentImgIndex && (
                <CSSTransition
                  timeout={1000}
                  classNames={isNext ? "right-to-left" : "left-to-right"}
                  key={i}
                  nodeRef={img.nodeRef}
                >
                  <img               
                    ref={img.nodeRef}
                    className="right-to-left"
                    src={img.pic === "catPic.jpg" ? catPic : dogPic}
                    alt=""
                  />
                </CSSTransition>
              )
            );
          })}
        </TransitionGroup>
      </div>
    </div>
  );
}

export default ImageScroller;

and here is my animation in scss

    .right-to-left-enter {
        transform: translateX(100%);
    }
    .right-to-left-enter-active {
        transform: translateX(0);
        transition:all 1s ease; 
    }      
    
    .right-to-left-exit {
        transform: translateX(0);
    }
    .right-to-left-exit-active {
        transform: translateX(-100%);
        transition:all 1s ease;
    }      
    
    .left-to-right-enter {
        transform: translateX(-100%);
    }
    .left-to-right-enter-active {
        transform: translateX(0);
        transition:all 1s ease;
    }      
    
    .left-to-right-exit {
        transform: translateX(0);
    }
    .left-to-right-exit-active {
        transform: translateX(100%);
        transition:all 1s ease;
    }