Setting array using useField hook

[gujral1997]

Is it possible to set an array using setValue? I am able to set a stringified value but unable to set an array. Also I have to use type as text. Unable to use setValue with type ui. Below is my custom component:

'use client'

import { useState, ChangeEvent, KeyboardEvent, Fragment } from 'react'
import { FieldLabel, CloseMenuIcon, TextInput, useFieldProps, useField } from '@payloadcms/ui'
import styles from './keyword-select.module.css'

const KeywordInput: React.FC = () => {
  const { path } = useFieldProps()

  // Assuming the value is stored as a JSON string in the CMS
  const { value = '["A", "B"]', setValue } = useField<string>({ path })

  const [input, setInput] = useState<string>('')

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value
    const isValidInput = /^[a-zA-Z0-9\s-]+$/.test(value)

    if (isValidInput || value === '') {
      setInput(value)
    }
  }

  const handleInputKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      e.preventDefault()
      if (input.trim() !== '') {
        // Parse the current value from JSON string to an array
        const currentKeywords = JSON.parse(value)
        // Add the new keyword and stringify it back to JSON
        setValue(JSON.stringify([...currentKeywords, input.trim()]))
        setInput('')
      }
    }
  }

  const removeKeyword = (indexToRemove: number) => {
    // Parse the current value from JSON string to an array
    const currentKeywords = JSON.parse(value)
    // Remove the keyword and stringify it back to JSON
    setValue(
      JSON.stringify(currentKeywords.filter((_: string, index: number) => index !== indexToRemove)),
    )
  }

  // Parse the value to display the keywords as tags
  const keywords = JSON.parse(value)

  return (
    <Fragment>
      <FieldLabel label="Keywords" />
      <div className={styles.container}>
        <TextInput
          label=""
          path=""
          value={input}
          onChange={handleInputChange}
          onKeyDown={handleInputKeyDown}
          placeholder="Type and press Enter to add keywords"
          className={styles.input}
        />
        <div className={styles.tagContainer}>
          {keywords.map((keyword: string, index: number) => (
            <span key={index} className={styles.tag}>
              {keyword}
              <button
                onClick={(e) => {
                  e.preventDefault()
                  removeKeyword(index)
                }}
                className={styles.removeButton}
                aria-label="Remove keyword"
              >
                <CloseMenuIcon />
              </button>
            </span>
          ))}
        </div>
      </div>
    </Fragment>
  )
}

export default KeywordInput