How to push generated elements into array and render them in React

In React application I need to generate HTML code for all elements in an array and render them.

Explanation:

providers: data provided by API,

PluginsProviderData: HTML element generated by another component,

moduleData: returns 5 objects. I need to generate "PluginsProviderData" element for each object.

_getConfigurationList() {
    const { providers } = this.props;
    let providersConfigurationList = [];
    if (providers != undefined) {
        let moduleData = providers[3].modules;
        providersConfigurationList = moduleData.forEach(function(data) {
            return (
                <PluginsProviderData key={data._id} title={data.name} headerId={"header" + data._id} manageId={"manage" + data._id}>                        
                </PluginsProviderData>
            );
        });
    }
    return providersConfigurationList;
    console.log(providersConfigurationList);
}

render() {

    const { providers } = this.props;

    let configurationList = this._getConfigurationList();

    return (
        <div>
            <div class="row topSpace">
                <div class="small-12 columns highLimiter">
                     {configurationList}
                </div>
            </div>
       </div>
    );
}

Could someone show me the way how to deal with such a task? I've tried to create a variable which holds the moduleData.forEach part and .push it to providersConfigurationList array however the array was always empty. I'm not sure what mistake I've done.

Thanks in advance !