Why is it that my array is defined but the elements inside it are not?

Question

I created this code in JavaScript:

var finalTimeline = [];
var holdingCell = [];

//LIKING RATING TASK - SET 1

var likingScale = [
  "1 (Strongly Dislike)",
  "2",
  "3",
  "4",
  "5",
  "6 (Strongly Like)"
]; //create rating scale for the liking rating task

var likingRatingTask_1 = {
  timeline: [{
    type: 'image-button-response-with-name',
    stimulus: jsPsych.timelineVariable('food'),
    choices: likingScale,
    prompt: "I would like to eat this food right now, in its presented quantity.",
    render_on_canvas: true,
    name: jsPsych.timelineVariable('name'),
    save_trial_parameters: {
      name: true
    }
  }],
  timeline_variables: [{
      food: "Images/small_salad.jpeg",
      name: 'salad'
    },
    {
      food: "Images/small_pear.jpeg",
      name: 'pear'
    },
    {
      food: "Images/small_lollipop.jpeg",
      name: 'lollipop'
    },
    {
      food: "Images/small_grapes.jpeg",
      name: 'grapes'
    },
    {
      food: "Images/small_cotton_candy.jpeg",
      name: 'cotton candy'
    },
    {
      food: "Images/small_cookie.jpeg",
      name: 'cookie'
    },
    {
      food: "Images/small_carrot.jpeg",
      name: 'carrot'
    },
    {
      food: "Images/small_cake.jpeg",
      name: 'cake'
    },
    {
      food: "Images/small_brownie.jpeg",
      name: 'brownie'
    },
    {
      food: "Images/small_apple.jpeg",
      name: 'apple'
    },
    {
      food: "Images/large_salad.jpeg",
      name: 'salad'
    },
    {
      food: "Images/large_pear.jpeg",
      name: 'pear'
    },
    {
      food: "Images/large_lollipop.jpeg",
      name: 'lollipop'
    },
    {
      food: "Images/large_grapes.jpeg",
      name: 'grapes'
    },
    {
      food: "Images/large_cotton_candy.jpeg",
      name: 'cotton candy'
    },
    {
      food: "Images/large_cookie.jpeg",
      name: 'cookie'
    },
    {
      food: "Images/large_carrot.jpeg",
      name: 'carrot'
    },
    {
      food: "Images/large_cake.jpeg",
      name: 'cake'
    },
    {
      food: "Images/large_brownie.jpeg",
      name: 'brownie'
    },
    {
      food: "Images/large_apple.jpeg",
      name: 'apple'
    }
  ],
  randomize_order: true,
  on_timeline_finish: function() {
    var imageNames = ['salad', 'pear', 'lollipop', 'grapes', 'cotton candy', 'cookie', 'carrot', 'cake', 'brownie', 'apple']; //list the category names
    for (let i = 0; i < imageNames.length; i++) {
      var responseData = jsPsych.data.getLastTimelineData().filter({
        name: imageNames[i]
      }).select('response').sum(); //for each image category, sum the responses
      var pictureData = jsPsych.data.getLastTimelineData().filter({
        name: imageNames[i]
      }).select('stimulus').values; //for each image category, retrieve the image paths
      holdingCell.push({
        rating: responseData,
        picture1: pictureData[0],
        picture2: pictureData[1]
      });
    }
  }
};
finalTimeline.push(likingRatingTask_1);
console.log(holdingCell);
console.log(holdingCell[0]);

The problem is that the holdingCell array elements seem to be undefined even though the array itself is defined. That is, the function console.log(holdingCell) returns an array of 10 objects, as it should. However, the function console.log(holdingCell[0]) returns undefined. It is as though the array only exists as a whole, where it is impossible to access any individual element in the array.

Has anyone encountered this problem before? If so, would you please detail how you solved it?