배열 렌더링 관련문제

개인 프로젝트를 진행하던 중 배열에 관련된 이슈가 발생하여 질문 드립니다.


위의 사진은 배열의 6번째 인덱스까지 반복문을 돌리며 저장하는 함수이고
밑의 사진은 서버에서 데이터를 받아와서(productAxios함수) 위의 사진에 있던 함수에 배열을 집어넣는 
과정입니다.
하지만 제 의도와는 다르게 
   
이런 식으로 배열이 생성 되었습니다.
원래는 

이런 식으로 나와야 하는데 말이죠....
강의 때 들은 내용을 기억해보면 state를 변경해주는 함수가 늦게 처리되고
배열의 6번째 인덱스 까지 저장해주는 함수(pushing함수)가 먼저 실행 되어  
발생한 문제 같아서 검색도 많이 해봤지만 결국 제가 원하는 답을 찾지 못했습니다. ㅠㅠ
강의 때 들은 useMemo훅을 사용해 보았지만 별다른 성과는 없었습니다.

위와 같은 시도를 해도 결과는 차이가 없었습니다.
이런 경우 어떻게 해결하나요?