Reagir JSX: renderizando matrizes aninhadas de objetos

Eu tenho um componente com a seguinte renderização:

  render() {
    const { policy } = this.props;
    let deployment = policy.Deployment;
    let value = policy.value;
    let policyLegend = deployment.policyLegend;
    let policyObj = this.valueToPolicy(policyLegend, value);
    console.log(policy);
    console.log(deployment);
    console.log(value);
    console.log(policyLegend);
    console.log(policyObj);
    return(
      <div>
        <Form onSubmit={ (event) => this.handleSubmit(event, this.props) }>
          {
            policyLegend.map(function(policy) {
              <div>
                <h3 key={ policy.id }>{ policy.displayName }</h3>
                {
                  policy.values.map(value => {
                    return(
                      <Form.Field key={ value.name }>
                        <label>{ value.displayName }</label>
                        <Checkbox toggle />
                      </Form.Field>
                    );
                  })
                }
              </div>
            })
          }
          <Button name={ 'Submit' } type='submit'>Submit</Button>
          <Button onClick={ this.props.onCancel }>Cancel</Button>
        </Form>
      </div>
    )
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

policyLegend é uma matriz de objetos com uma matriz de 'valores' dentro de cada objeto.

Quando meu aplicativo cria, não recebo erros, mas nada aparece na minha página do componente. Não sei ao certo onde estou errado e gostaria de receber algum conselho, obrigado.

questionAnswers(2)

yourAnswerToTheQuestion