Новичок в React и пытается зациклить атрибуты объектов, но React жалуется на недопустимость объектов. Дочерние элементы React, может кто-нибудь дать мне совет, как решить эту проблему? Я добавил createFragment, но не совсем уверен, куда это нужно пойти или какой подход мне выбрать?

JS

var tifs = {1: 'Joe', 2: 'Jane'};
var tifOptions = Object.keys(tifs).forEach(function(key) {
    return <option value={key}>{tifs[key]}</option>
});

Функция рендеринга

render() {
        const model = this.props.model;

        let tifOptions = {};

        if(model.get('tifs')) {
            tifOptions = Object.keys(this.props.model.get('tifs')).forEach(function(key) {
                return <option value={key}>{this.props.model.get('tifs')[key]}</option>
            });
        }

        return (
            <div class={cellClasses}>

                    <div class="grid__col-5 text--center grid__col--bleed">
                        <h5 class="flush text--uppercase">TIF</h5>
                        <select id="tif" name="tif" onChange={this.handleChange}>
                            {tifOptions}
                        </select>
                    </div>

            </div>
        );
    }

Ошибка в консоли

If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object)