How to insert an array inside an array dynamically in Javascript

Help, I'm using filepond and I want to put the files uploaded inside an array from a declared array. I'm really sorry, my first time to use File Pond library. This is my sample code.

let data_to_review = []

$('.step:nth-child(1) .form-control').each(function(index, element){
   if($(element).hasClass('required')) {
       nextstep = checkForm($(element).attr('id'))
   }
   data_to_review[$(element).attr('id')] = $(element).val() 
})

$('.file_uploader').on('FilePond:addfile', function(e) {
     console.log('file added event', e);
     testData()
});

function testData() {
   let files = $('.file_uploader').filepond('getFiles');
   $(files).each(function (index) {
       data_to_review['files'][index] = files[index].file
   });
   console.log(data_to_review)
}

Everytime I used the code above, it gives me Uncaught TypeError: Cannot set properties of undefined (setting '0')

My desired array will be like this: [{ files: [ file one, file two ] }] Thanks in advance!

Solution

{ files: [ file one, file two ] } is not an array but an object.
Well, declare data_to_review as an object then set its property files as an array containings the files you want.

// declare data_to_review as an empty object
let data_to_review = {}

function test() {
     let files = $('.file_uploader').filepond('getFiles');
     data_to_review['files'] = [...files].map(f => f.file)
     console.log(data_to_review)
 }

Another solution is to define the files property when declaring data_to_review then push each file inside.

// declare data_to_review as an empty object
let data_to_review = { files: [] }

function test() {
     let files = $('.file_uploader').filepond('getFiles');
     $(files).each(function (index) {
         data_to_review['files'].push(files[index].file)
     });
     console.log(data_to_review)
 }