Estoy tratando de mostrar una lista dentro de un formulario, pero no entiendo por qué no se muestra.

 useEffect(() => { props.getRealms(); // I make call to api localStorage.setItem('realm', JSON.stringify(realm)); }, [realm]); const { realmsList, loadingRealms } = props; console.log('realmsList.length ', realmsList.length); return ( <div> <AvForm model={{}} onSubmit={saveEntity}> {realmsList.length > 0 ? ( <div> <AvGroup> <Label>Realm</Label> <AvInput id="personaInfo-realm" data-cy="realm" type="select" name="realm"> <option value="" key="0"> Choose Realm </option> {realmsList.map(entity => { console.log('entity ', entity), ( <option key={entity.id} value={entity.id}> {entity.name} </option> ); })} </AvInput> </AvGroup> <Button color="primary" id="save-entity" data-cy="entityCreateSaveButton" type="submit" style={{ marginLeft: 10 }}> <FontAwesomeIcon icon="save" /> Save </Button> </div> ) : ( <div className="d-flex justify-content-center"> <div className="spinner-border text-primary" role="status"> <span className="visually-hidden"></span> </div> </div> )} </AvForm> </div> ); }; const mapStateToProps = ({ sceRealm }: IRootState) => ( { realmsList: sceRealm.entities, loadingRealms: sceRealm.loading, } ); const mapDispatchToProps = { getRealms, }; type StateProps = ReturnType<typeof mapStateToProps>; type DispatchProps = typeof mapDispatchToProps; export default connect(mapStateToProps, mapDispatchToProps)(ScePersonaInfoUpdate);

En mi devolución escribí esta condición: realmsList.length > 0, pero lo único que puedo ver es escribir "Elegir reino" y no la lista de reinos. El registro de la consola dentro del mapa, muestra las entidades de la lista.

¿Cómo puedo arreglarlo?

Gracias