Instagram Graph APIを使って取得した配列に対して、undefinedになる。

以下のコードでは、配列で指定する番号の部分を直に書いてるか、for文で書いてるか、の違いぐらいしかないと思ったのですが、(実際そこしか変えていない)、for文の方はundefinedになり、画像を表示することができません。

もし理由がわかりましたらご教授いただければ幸いです。

js
1axios.get("./instagram.php").then(instagram_data => {
2    const gallery_data = instagram_data["data"]["media"]["data"];
3
4    let photos = "";
5    const photo_length = 9;
6
7    //ベタ書きの部分
8    photos += '<li><imgsrc="' + gallery_data[0].media_url + '"></li>';
9    photos += '<li><imgsrc="' + gallery_data[1].media_url + '"></li>';
10    photos += '<li><imgsrc="' + gallery_data[2].media_url + '"></li>';
11    photos += '<li><imgsrc="' + gallery_data[3].media_url + '"></li>';
12    photos += '<li><imgsrc="' + gallery_data[4].media_url + '"></li>';
13    photos += '<li><imgsrc="' + gallery_data[5].media_url + '"></li>';
14    // 結果はちゃんと取得できる
15
16
17    // For文の部分 
18    for (let number = 0; number < photo_length; number++) {
19        console.log(number);
20        photos += '<li class="instagram__list-item"><img class="instagram__list-img" src="' + gallery_data[number].media_url + '"></li>';
21    }
22    // => 結果 TypeError: Cannot read property 'media_url' of undefined at main.js:15
23
24    document.querySelector("#instagram").innerHTML = photos;
25}).catch(error => {
26    console.log(error);
27})
28