안녕하세요. 질문자님께서 puzzledata에 초기값으로 1개의 아이템만을 할당하셨기 때문에 최초 컴포넌트 렌더링 시에는 puzzledata[0]에만 값이 존재하며, puzzledata[1], puzzledata[2]에는 값이 존재하지 않으므로 Uncaught TypeError: Cannot read properties of undefined (reading 'src')라는 에러가 발생했을 것입니다. 따라서 해당 에러를 방지하기 위해서는 <SwiperSlide><img src={puzzledata[0].img}/></SwiperSlide> <SwiperSlide><img src={puzzledata[1].img}/></SwiperSlide> <SwiperSlide><img src={puzzledata[2].img}/></SwiperSlide> 위 부분을 {puzzledata.map(item => <SwiperSlide key={item.id}><img src={item.img}/><SwipserSlide>)} 와 같이 변경하시면 되겠습니다. 변경한 코드는 아래와 같이 동작합니다. 1. 최초 컴포넌트 렌더링 1-1) puzzledata = [{...}] 1-2) {puzzledata.map(item => <SwiperSlide key={item.id}><img src={item.img}/><SwipserSlide>)}에서 총 1개의 SwiperSlide만 렌더링 2. setPuzzledata 호출 시 컴포넌트 리렌더링 2-1) puzzledata = [{...}, {...}, {...}] 2-2) {puzzledata.map(item => <SwiperSlide key={item.id}><img src={item.img}/><SwipserSlide>)}에서 총 3개의 SwiperSlide가 렌더링 아래 gist 링크는 제가 테스트해 본 코드인데요, 궁금하시면 한 번 참고해보세요! https://gist.github.com/sekhyuni/1e8ab8d656da777310b55bf46a82d58a