Reactjs 如何在一个语义界面下创建多个表单字段？

我想在语义UI react中隐藏一个手风琴下的多个表单字段，但该示例仅显示一个手风琴下的一个表单字段“处女名”。无论我怎么做，我都无法在第一个表单字段下显示第二个表单字段

代码沙盒位于以下位置：

从“React”导入React
从“语义ui react”导入{手风琴、按钮、表单、片段}
常数面板=[
{
关键字：“详细信息”，
标题：“可选详细信息”，
内容：{
as:Form.Input，
标签：“处女名”，
占位符：“处女名”，
},
},
]
const AccordionExampleForm=（）=>(
注册
)
导出默认的AccordionExampleForm

先谢谢你

import React from 'react'
import { Accordion, Button, Form, Segment } from 'semantic-ui-react'

const panels = [
  {
    key: 'details',
    title: 'Optional Details',
    content: {
      as: Form.Input,
      label: 'Maiden Name',
      placeholder: 'Maiden Name',
    },
  },
]

const AccordionExampleForm = () => (
  <Segment>
    <Form>
      <Form.Group widths={2}>
        <Form.Input label='First Name' placeholder='First Name' />
        <Form.Input label='Last Name' placeholder='Last Name' />
      </Form.Group>
      <Accordion as={Form.Field} panels={panels} />

      <Button secondary>Sign Up</Button>
    </Form>
  </Segment>
)

export default AccordionExampleForm