Custom component shows only first array element value in Sanity

Based on your description, it sounds like you're creating a custom component for array items that displays file URLs, but the component is showing the same value (from the first array element) for all items. This is a common issue when working with array fields in Sanity Studio.

The problem is likely that your component needs to access the correct item-specific value rather than reading from the document root. In Sanity Studio v3, you should use the value prop passed directly to your custom component, or use hooks like useFormValue() with the correct path.

Here's what typically causes this issue and how to fix it:

The Issue: When you use useFormValue([]) or access the document root, you're getting the entire document, and if you're then manually accessing an array by index, you might be inadvertently always accessing the first item.

The Solution: Your custom component receives a value prop that contains the specific array item's data. Use this directly:

import { Stack, Text } from '@sanity/ui'

const FileUrlDisplay = (props) => {
  const { value, renderDefault } = props
  
  // value contains the specific array item's data
  const fileUrl = value?.asset?.url || 'No file uploaded'
  
  return (
    <Stack space={3}>
      {renderDefault(props)}
      <Text size={1} muted>
        File URL: {fileUrl}
      </Text>
    </Stack>
  )
}

export default FileUrlDisplay

If you need to access the specific path for this array item using hooks, you can use the path prop that's passed to your component:

import { useFormValue } from 'sanity'
import { Stack, Text } from '@sanity/ui'

const FileUrlDisplay = (props) => {
  const { renderDefault, path } = props
  
  // This gets the value at the specific path for this array item
  const itemValue = useFormValue(path)
  const fileUrl = itemValue?.asset?.url || 'No file uploaded'
  
  return (
    <Stack space={3}>
      {renderDefault(props)}
      <Text size={1} muted>
        File URL: {fileUrl}
      </Text>
    </Stack>
  )
}

Key Points:

• Each array item component receives its own value and path props
• The path prop contains the correct path to that specific array item (e.g., ['files', 0], ['files', 1], etc.)
• Using props.value directly is usually the simplest approach
• If you use useFormValue(), make sure to pass the path prop, not a hardcoded path

Without seeing your specific code, I can't pinpoint the exact issue, but the most common mistake is using useFormValue(['arrayFieldName', 0]) with a hardcoded 0 index, which would always grab the first item. Always use the path prop or value prop that's passed to your component to ensure you're accessing the correct array item's data.