React의 배열에서 미리로드 된 이미지를 매핑하는 방법은 무엇입니까?

이미지 캐 러셀에 대한 일부 이미지를 미리로드하고 배열에 저장하려고합니다. 배열의 이미지를 JSX에 매핑하려고 할 때를 제외하고는 지금까지 모든 것이 작동하는 것 같습니다. 오류가 발생합니다.

오류 : 개체가 React 자식으로 유효하지 않습니다 (발견됨 : [object HTMLImageElement]). 자식 컬렉션을 렌더링하려는 경우 대신 배열을 사용하십시오.

누군가 제발 왜 제발 말해 줄 수 있습니까?

후속 질문으로 내 setInterval (이미지를 회전하는 데 사용됨)이 시작되지 않고 왜 그에 대한 도움을 주시면 대단히 감사하겠습니다.

import React, { useEffect, useState } from 'react'
import { CSSTransition } from 'react-transition-group'
import { ImageCarouselContainer, ImageCarouselSlide } from './imagecarousel.styles'
const images = [
      'https://images.unsplash.com/photo-1588392382834-a891154bca4d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2555&q=80',
      'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2551&q=80',
      'https://images.unsplash.com/photo-1470813740244-df37b8c1edcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2551&q=80'
]

const ImageCarousel = () => {
      const [activeImage, setActiveImage] = useState(1);
      const [imagesArr, setImagesArr] = useState([])
      
      useEffect(() => {
            let loadedImages = []
            images.forEach(el => {
                  let img = new Image()
                  img.onload = () => {
                        loadedImages.push(img);
                  }
                  img.src = el
            })
            setImagesArr(loadedImages);
            const counter = () => {
                  if(activeImage < imagesArr.length) {
                        setActiveImage(activeImage + 1)
                  } else {
                        setActiveImage(0) 
                  }
            }
            
            const interval = setInterval(counter, 1000)
            
            return () => {
                  clearInterval(interval);
            }
            
      }, [])

      return (
            <ImageCarouselContainer>

                  {      
                        imagesArr &&
                        imagesArr.map((el, idx) => (
                        <CSSTransition
                              classNames='image'
                              timeout={1000}
                              key={idx}
                              in={activeImage === idx ? true : false}
                              unmountOnExit
                        >
                              <ImageCarouselSlide 
                                    
                              >
                              {el}
                              </ImageCarouselSlide>
                        </CSSTransition>  
                        ))
                  }

            </ImageCarouselContainer>
      )
}

export default ImageCarousel