Add custom text input option to predefined options list in Sanity Studio

import { set, unset } from 'sanity'
import { Stack, Select, TextInput, Card, Text } from '@sanity/ui'
import { useState } from 'react'

const presetLabels = ['First Name', 'Last Name', 'Company', 'Email', 'Message', 'Phone']

function LabelInput(props) {
  const { value, onChange } = props
  const [useCustom, setUseCustom] = useState(
    value && !presetLabels.includes(value)
  )

  const handlePresetChange = (event) => {
    const newValue = event.currentTarget.value
    
    if (newValue === '__custom__') {
      setUseCustom(true)
      onChange(unset())
    } else {
      setUseCustom(false)
      onChange(newValue ? set(newValue) : unset())
    }
  }

  const handleCustomChange = (event) => {
    const newValue = event.currentTarget.value
    onChange(newValue ? set(newValue) : unset())
  }

  return (
    <Stack space={3}>
      <Select
        value={useCustom ? '__custom__' : (value || '')}
        onChange={handlePresetChange}
      >
        <option value="">Select a label...</option>
        {presetLabels.map((label) => (
          <option key={label} value={label}>
            {label}
          </option>
        ))}
        <option value="__custom__">Custom label...</option>
      </Select>
      
      {useCustom && (
        <Card border padding={3}>
          <Stack space={2}>
            <Text size={1} weight="semibold">Custom Label</Text>
            <TextInput
              value={value || ''}
              onChange={handleCustomChange}
              placeholder="Enter custom label"
            />
          </Stack>
        </Card>
      )}
    </Stack>
  )
}

// In your schema:
export default {
  name: 'myDocument',
  type: 'document',
  fields: [
    {
      name: 'label',
      title: 'Label',
      type: 'string',
      components: {
        input: LabelInput
      }
    }
  ]
}