<Select
  defaultValue=''
  accessibilityLabel='Select music genre'
  accessibilityHint='Opens a list of genre options'
  accessibilityRole='combobox'
  accessibilityState={{ 
    expanded: false, // Use a static value or implement state management
    disabled: false
  }}
  onOpenChange={(open) => {
    // You can implement state management here if needed
    // Example: setIsExpanded(open);
  }}
  accessibilityLiveRegion='polite'
>
  <SelectTrigger
    ref={triggerRef}
    className='w-full tracking-tighter'
    accessibilityRole='button'
    accessibilityLabel='Select music genre dropdown'
    accessibilityHint='Press to open genre options'
  >
    <SelectValue
      className='text-md text-foreground native:text-md'
      placeholder='Select music genre'
      style={styles.Inter}
      accessibilityLabel='No genre selected'
      importantForAccessibility='yes'
    />
  </SelectTrigger>
  <SelectContent
    insets={contentInsets}
    className='w-full mt-2'
    accessibilityRole='menu'
    accessibilityLabel='Genre options'
    accessibilityViewIsModal={true}
  >
    <SelectGroup
      accessibilityRole='radiogroup'
      accessibilityLabel='Music genre options'
    >
      {[
        { label: 'Jazz', value: 'jazz' },
        { label: 'Electronica', value: 'electronica' },
        { label: 'Dub / Experimental', value: 'dub experimental' },
        { label: 'Rock', value: 'rock' },
      ].map((item) => (
        <SelectItem
          key={item.value}
          label={item.label}
          value={item.value}
          style={styles.Inter}
          accessibilityRole='radio'
          accessibilityLabel={item.label}
          accessibilityState={{
            checked: false, // This should be updated based on your state management
            disabled: false,
          }}
          accessibilityHint={`Select ${item.label} as your music genre`}
        >
          {item.label}
        </SelectItem>
      ))}
    </SelectGroup>
  </SelectContent>
</Select>