shoes props.i 가 1씩 뒤로 밀리는 문제

안녕하세요 선생님.
강의를 듣다가 npm start 를 해보니 갑자기 props.i 가 1씩 앞으로 밀려
존재하지 않는 shoes0.jpg 로 설정되어 첫번째 사진이 안 나오네요ㅠㅠ 무슨 문제일까요?
코드가 틀렸나 해서 몇 번이고 선생님 코드랑 대조도 해봤는데 ㅠㅠ

<div className='row'>
                {shoes.map((a,i)=>{
                  return <Prod shoes={shoes[i]} i={i} />
                })}
              </div>
              <button onClick={()=>{ 
                axios.get('https://codingapple1.github.io/shop/data2.json')
                .then((결과)=>{ 
                  console.log(결과.data)




function Prod(props) {
  return (
    <div className='col-md-4 shoespic'>
      
      <h3 className='shoesname'>
        {props.shoes.title}</h3>
      <p>{props.shoes.content}</p>
      <p>{props.shoes.price}</p>
    </div>
  )
}