Nuevo en React y tratando de repetir los atributos de Object, pero React se queja de que los objetos no son válidos. React children, ¿alguien puede darme algún consejo sobre cómo resolver este problema? ¿He agregado createFragment pero no estoy completamente seguro de a dónde debe ir esto o qué enfoque debo tomar?

JS

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

Función de procesamiento

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>
        );
    }

Error en la consola

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