리액트 axios로 불러온 데이터 호출할 때 에러

 선생님 강의를 다 듣고 혼자 프로젝트를 해보는중인데

데이터를 json파일로 만들어서 깃허브에 올린뒤에 axios로 호출해서 state에 저장해서 사용하려는데 에러가납니다.

콘솔창에 출력을했을 때 데이터 받아온건 잘 출력이 되는데 그걸 사용해서 화면에 보여줄 때 에러가납니다.



불러온 방법의 코드
콘솔창에 데이터 불러와진것

이렇게 데이터는 잘 가져와진것 같은데



Swiper에서 슬라이드 이미지로 0,1,2번째 이미지를 사용하려고 뽑아보면



이런식의 에러가나면서 화면에 아무것도 출력되지않고 에러만납니다 .ㅠㅠ

검색해봤을 때 state에 axios로 불러온 데이터가 들어가기전에 객체 하나만있는 state상태로 html을 구성해서 그런것같은데

이 방법을 해결하려면 어떠한 방법을 사용해야할까요..? 딱 시원하게 해결방법이 나오질않아서 질문드립니다..ㅠ

첫 state에 더미배열로 아무런객체로 10개씩 만들어두면 코드는 작동할거같긴한데 지저분하고 효율적이지않을것같아서
다른 방법이있는지 알고싶습니다.

json으로 불러올데이터가 2개가 더 있습니다..ㅠ