Loop is adding too many items to the final array

Question

I have a config that looks like this:

{
  payTable: [
    {name: 'rouge',     reelCount: [10,10,10,10,10]},
    {name: 'wolfman',   reelCount: [10,10,10,10,10]},
    {name: 'sorceress', reelCount: [10,10,10,10,10]},
    {name: 'ace',       reelCount: [10,10,10,10,10]},
    {name: 'king',      reelCount: [10,10,10,10,10]},
    {name: 'queen',     reelCount: [10,10,10,10,10]},
    {name: 'jack',      reelCount: [10,10,10,10,10]},
    {name: 'wild',      reelCount: [10,10,10,10,10]}
  ],
  rules: {
    cols: 5
  }
}

The item config.payTable.reelCount is an array of how many items of this type should be in the final array. The length of this array will always be the same size as config.rules.cols.

Here is what I am doing. First I create an array of arrays called reels which will be an array with config.rules.cols as the total number of child arrays.

Next I loop through the config.payTable, then through config.payTable.reelCount to get how many times that item should be in reels[x] I then add it that many times.

The issue that I am running into is that it creating 5 arrays with 400 items in each array. What I need is for it to create 5 arrays with 80 items in each array (10x8=80 where 10 is the number from reelCount, and 8 is the number of items).

let reels = new Array(config.rules.cols).fill([])
// Creates an array that looks like this:
// [ [],[],[],[],[] ]

config.payTable.forEach((item, itemIdx) => {
  item.reelCount && item.reelCount.forEach((times, countIdx) => {
    for (let k = 0; k < times; k++) {
      reels[countIdx].push(item)
    }
  })
})