const options = [
  {
    title: 'Arrangement Files',
    options: [
      {
        label: 'Chord Chart + → Lyrics & Chords',
        type: 'TXT',
      },
      {
        label: 'Lead Sheet',
        type: 'PDF',
      },
    ],
  },
  {
    title: 'E (Most Common)',
    options: [
      {
        label: 'E Chord Chart +',
        type: 'PDF',
      },
    ],
  },
  {
    title: 'Ab',
    options: [
      {
        label: 'Ab Chord Chart +',
        type: 'PDF',
      },
    ],
  },
]
render(
  <Select
    multiple
    renderValue={(selectedOptions) => (
      <Select.Value>
        {selectedOptions.map((option) => option.value).join(', ')}
      </Select.Value>
    )}
    style={{ maxWidth: 400 }}
  >
    {options.map((optgroup) => (
      <Select.OptionGroup key={optgroup.title} title={optgroup.title}>
        {optgroup.options.map((option) => (
          <Select.Option key={option.label} value={option.label}>
            <Text marginRight={2}>{option.label}</Text>
            <Badge size="xs" marginLeft="auto">
              {option.type}
            </Badge>
          </Select.Option>
        ))}
      </Select.OptionGroup>
    ))}
  </Select>
)