I have this piece of code which calls one of two functions to return some JSX which is then added to an array to be displayed later in the function. The problem that I am having is that on each loop through the inputs array in subsections is not being overwritten and as such the inputs for other subsections are being added to the final array multiple times.

Any advice or direction on where to look to solve this problem would be greatly appreciated.

// Subsections
for (let i = 0; i < pageComponent['subsections'].length; i++) {
    let subsectionComponent = pageComponent['subsections'][i];
    let inputs = [];

    // Inputs
    for (let k = 0; k < subsectionComponent['questions'].length; k++) {
        let questionComponent = subsectionComponent['questions'][k]
        if (questionComponent['type'] === 'TextArea') {
            this[inputs].push(this.addTextArea(questionComponent));
        } else {
            this[inputs].push(this.addInput(questionComponent));
        }
    }
    subsectionInputs.push(<div key={i+"_subgroup_div"} className="form-group row">
        <h3 style={{margin: 15}}>{subsectionComponent[0]}</h3>
        {this[inputs]}
    </div>);
}