map 반복문 질문드립니다.

function App (){ return ( <div> { 글제목.map(function(a, i){ return ( <div className="list"> <h4 onClick={()=>{ setModal(true); setTitle(i); }}>{ 글제목[i] }</h4> <p>2월 18일 발행</p> </div> ) }) } </div> ) }

props를 응용한 상세페이지 만들기 part 인데요,
여기서 map으로 반복문이 돌 때마다 i가 0, 1, 2로 되어서 setTitle[i]로 해결을 하셨다고 했는데요.
글제목[i] 부분은 잘 이해가 되었습니다.
근데 onClick 부분이 사용자가 눌렀을 때 실행되는 코드인데, 반복문이 전부 다 돌고 누르는 것 같은데, i가 2로 남아있는게 아니라,
i가 어떻게 각각 0, 1, 2 로 남아있을 수 있는지 원리를 모르겠습니다.
저는 setTitle[2], setTitle[2], setTitle[2]로 남아있을 거라고 생각하는데, setTitle[0], setTitle[1], settitle[2] 로 남아있을 수 있는 원리가 궁금합니다.