Custom Image Preview Not Showing in Sanity Document List

Your code looks correct! The official Sanity documentation on List Previews shows that you can indeed return JSX directly in the media property from the prepare() function, which is exactly what you're doing.

However, there are a few things that might be preventing your image from showing:

1. Try adding explicit dimensions to your image

The preview thumbnails have specific size constraints. Try adding width/height styles:

preview: {
  select: {
    title: "title",
    locale: "localeId"
  },
  prepare({ title, locale }) {
    return {
      title: title,
      subtitle: locale,
      media: (
        <img 
          src="https://purecatamphetamine.github.io/country-flag-icons/3x2/US.svg" 
          alt={title}
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
        />
      )
    };
  }
}

2. Check your Studio version compatibility

Since you mentioned you're on v2.21.0, make sure your React version is compatible. Custom preview media with JSX should work, but there might be version-specific quirks.

3. Try wrapping in a container

Sometimes the preview system needs a proper container:

media: (
  <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
    <img 
      src="https://purecatamphetamine.github.io/country-flag-icons/3x2/US.svg" 
      alt={title}
      style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
    />
  </div>
)

4. Verify the image URL is accessible

Make sure the external SVG URL isn't being blocked by CORS or CSP policies. You can check your browser's console for any network errors.

5. Consider using an emoji as a simpler alternative

While you work out the image issue, you could use an emoji flag as shown in the Sanity documentation example:

media: <span style={{ fontSize: '1.5rem' }}>🇺🇸</span>

This isn't a bug in v2.21.0 — the preview system should support your approach. The issue is likely related to styling/sizing or how the external image is being loaded. Try the styling suggestions above and check your browser console for any errors that might give more clues.