Javascript 语义UI/ReactJS |使用下拉列表作为组

我正在使用语义UI/ReactJS，希望将组件作为组使用，但没有这样的选项，但我在谷歌上找到了一个提供此功能的组件，但在独立的语义UI中不用于ReactJS，如何使用下拉列表作为组

<Dropdown
    id="Province"
    search selection clearable
    options={this.state.ProvinceData && this.state.ProvinceData.map(v => {
        return {
            key: v.id,
            text: v.name,
            value: v.id
        }
    })}
    onChange={this.getProvince}
    placeholder="-- Choose --"
    value={this.state.provinceValue}
    noResultsMessage={'Not Found!'}
/>

使用及

只需按照上面的jsx迭代您的选项，然后使用

只需按照上面的jsx迭代您的选项

<Dropdown
    id="Province"
    search selection clearable
    onChange={this.getProvince}
    placeholder="-- Choose --"
    value={this.state.provinceValue}
    noResultsMessage={'Not Found!'}
    <Dropdown.Menu>
        <Dropdown.Divider />
        <Dropdown.Header icon='tags' content='Group 1' />
        <Dropdown.Item text='Text 1' />
        <Dropdown.Item text='Text 2' />
        <Dropdown.Item text='Text 3' />
        <Dropdown.Divider />
        <Dropdown.Header icon='tags' content='Group 2' />
        <Dropdown.Item text='Text 4' />
        <Dropdown.Item text='Text 5' />
        <Dropdown.Item text='Text 6' />
    </Dropdown.Menu>
</Dropdown>