How to bind nested FromForm data with List to model form Javascript

I have a javascript form with a bunch of data that is appended to a form as follows:

                    this.historicalPreprintDocs.forEach((round, index) => {
                        form.append(`data[${index}].ppid`, this.selectPPID.PPID)
                        form.append(`data[${index}].round`, round.round)
                        form.append(`data[${index}].preprint`, round.preprint)
                        round.supportingDocumentation ? round.supportingDocumentation.forEach((file, index2) => {
                            form.append(`data[${index}].supportingDocumentation[${index2}]`, file)
                        }) : form.append(`data[${index}].supportingDocumentation`, null)
                    })

The issue is my model keeps binding as null for my controller. As soon as I use List for supportingDocumentation it breaks:

    public class HistoricalPreprintReview
{
    [ModelBinder(Name = "ppid")]
    public int ppid { get; set; }
    [ModelBinder(Name = "round")]
    public int round { get; set; }
    [ModelBinder(Name = "preprint")]
    public IFormFile preprint { get; set; }
    [ModelBinder(Name = "supportingDocumentation")]
    public List<IFormFile> supportingDocumentation { get; set; }
}

And my controller is as follows:

        [HttpPost]
    public async Task<ActionResult> UploadHistoricalReview([FromForm] List<HistoricalPreprintReview> data)
    {
// data comes back as null when stepping through and getting to supportingDocumentation
        }

I can see my payload it has the bindary data for each data[0].supportingDocumentation[0] , etc. so I am not sure why this does not work.