How to grab values of tracked JS list fields?

Question

I'm having trouble grabbing the values of a tracked JS list with fields "Name" and "Content". If I make individual lists for each field, it works fine. But I don't want to use multiple for:each in my HTML. When I try the first method, it does not grab the step.Name that is stored in the list. However, with the second method, it does.

The JS:

@track stepList = [];

addStep(){
    const fields = {};
    fields['Name'] = 'testName';
    fields['Content'] = 'testContent';
    const newInput = {fields};
    this.stepList.push(newInput);
}

The HTML:

<lightning-accordion allow-multiple-secions-open onsectiontoggle={handleToggleSection}>
    <template if:true={stepList}>
        <template for:each={stepList} for:item={step}>
            <lightning-accordion-section key={step.Name} label={step.Name}>
                {step.Content}
            </lightning-accordion-section>
        </template>
    </template> 
</lightning-accordion>

Like I said, it works perfectly fine if I do the following:

@track stepNames = [];
@track stepContents = [];

addStep(){
    this.stepNames.push('testName');
    this.stepContents.push('testContent');
}

And:

<lightning-accordion allow-multiple-secions-open onsectiontoggle={handleToggleSection}>
    <template if:true={stepNames}>
        <template for:each={stepNames} for:item={name}>
            <lightning-accordion-section key={name} label={name}>
                I don't want to do an additional for:each for Content.
            </lightning-accordion-section>
        </template>
    </template> 
</lightning-accordion>

Answer 1

I was told a fix as follows:

@track stepList = [];

addStep(){
    let step = { 'Name': 'testName', 'Content': 'testContent'};
    this.stepList.push(step);
}