Convert comma-separated string to multiple tag references in Sanity array

import {set, unset, insert, setIfMissing} from 'sanity'
import {Stack, TextInput, Button, Card, Text, Flex} from '@sanity/ui'
import {useCallback, useState} from 'react'
import {useClient} from 'sanity'

function TagsInput(props) {
  const {value = [], onChange, schemaType} = props
  const [inputValue, setInputValue] = useState('')
  const client = useClient({apiVersion: '2023-01-01'})
  
  const handleAddTags = useCallback(async () => {
    // Split by comma and clean up
    const tagNames = inputValue
      .split(',')
      .map(t => t.trim())
      .filter(Boolean)
    
    if (tagNames.length === 0) return
    
    // Create or fetch tag documents
    const tagRefs = await Promise.all(
      tagNames.map(async (tagName) => {
        const slug = tagName.toLowerCase().replace(/\s+/g, '-')
        
        // Check if tag already exists
        const existingTag = await client.fetch(
          `*[_type == "tag" && slug.current == $slug][0]`,
          {slug}
        )
        
        if (existingTag) {
          return {
            _type: 'reference',
            _ref: existingTag._id,
            _key: `tag-${Date.now()}-${Math.random()}`
          }
        }
        
        // Create new tag document
        const newTag = await client.create({
          _type: 'tag',
          title: tagName,
          slug: {_type: 'slug', current: slug}
        })
        
        return {
          _type: 'reference',
          _ref: newTag._id,
          _key: `tag-${Date.now()}-${Math.random()}`
        }
      })
    )
    
    // Merge with existing tags
    const newValue = [...(value || []), ...tagRefs]
    onChange(set(newValue))
    setInputValue('')
  }, [inputValue, value, onChange, client])
  
  return (
    <Stack space={3}>
      <Flex gap={2}>
        <Card flex={1}>
          <TextInput
            value={inputValue}
            onChange={(e) => setInputValue(e.currentTarget.value)}
            placeholder="Enter tags separated by commas"
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                e.preventDefault()
                handleAddTags()
              }
            }}
          />
        </Card>
        <Button onClick={handleAddTags} text="Add Tags" tone="primary" />
      </Flex>
      
      {value && value.length > 0 && (
        <Text size={1} muted>
          {value.length} tag{value.length !== 1 ? 's' : ''} selected
        </Text>
      )}
      
      {/* Render the default array input below */}
      {props.renderDefault(props)}
    </Stack>
  )
}

// In your schema:
export default {
  name: 'post',
  type: 'document',
  fields: [
    {
      name: 'tags',
      title: 'Tags',
      type: 'array',
      of: [{type: 'reference', to: {type: 'tag'}}],
      components: {
        input: TagsInput
      }
    }
  ]
}