Trouble adding reference to array causing crashes in Sanity UI

This React error typically happens when you're accidentally trying to render a React component object directly instead of using JSX syntax. In the context of Sanity Studio custom components, this often occurs when working with custom input components for reference arrays.

Here are the most common causes and solutions:

1. Check Your Component Return Statement

Make sure you're returning JSX properly. The error suggests you might be returning a component reference instead of rendering it:

// ❌ WRONG - returns component object
const MyComponent = (props) => {
  return props.renderDefault  // This is the component itself
}

// ✅ CORRECT - renders the component
const MyComponent = (props) => {
  return props.renderDefault(props)  // Calling it with props
}

2. Using renderDefault Correctly

When customizing reference array inputs, make sure you're calling renderDefault as a function:

import { defineField } from 'sanity'

export default defineField({
  name: 'myReferences',
  type: 'array',
  of: [{ type: 'reference', to: [{ type: 'someType' }] }],
  components: {
    input: (props) => {
      // Do your custom logic here
      
      // Then render the default component
      return props.renderDefault(props)  // ✅ Called as function
    }
  }
})

3. Check for Async/Promise Issues

If you're fetching data or using useFormValue to access other field values, make sure you're not accidentally returning a Promise:

import { useFormValue } from 'sanity'
import { useEffect, useState } from 'react'

const MyReferenceInput = (props) => {
  const relatedField = useFormValue(['someOtherField'])
  const [isReady, setIsReady] = useState(false)
  
  useEffect(() => {
    // Do async work
    setIsReady(true)
  }, [relatedField])
  
  if (!isReady) return <div>Loading...</div>
  
  return props.renderDefault(props)  // ✅ Returns JSX
}

4. Verify Your Schema Structure

When you say you "restructured it to match the other object," make sure your reference definition is correct:

{
  name: 'myArray',
  type: 'array',
  of: [
    {
      type: 'reference',
      to: [{ type: 'targetDocumentType' }]
      // Not an object with a reference inside
    }
  ]
}

5. Check Component Registration

If you're registering a custom component, ensure you're passing the component correctly:

// ❌ WRONG
components: {
  input: MyComponent()  // Calling it
}

// ✅ CORRECT
components: {
  input: MyComponent  // Passing the component reference
}

Debugging Steps

1. Add console.logs to see what you're actually returning
2. Simplify your component to just return props.renderDefault(props) and see if it works
3. Check the browser console for the full error stack trace - it will show which component is causing the issue
4. Restart the dev server after schema changes

The "days later it crashes" behavior suggests you might have a conditional that sometimes returns the wrong type, or there's a race condition with async data. Focus on making sure every code path returns valid JSX, not component objects or Promises.

If you can share a minimal version of your custom component code, I can help pinpoint the exact issue!