How to filter an array of references based on a field in the same document.

import React from 'react';

export default {
  name: 'projectGroup',
  title: 'Project Group',
  type: 'object',
  initialValue: {
    disabled: false,
  },
  fields: [
    {
      name: 'designArea',
      title: 'Design Area',
      type: 'designArea',
    },
    {
      name: 'content',
      title: 'Projects',
      description: 'Choose from our projects.',
      type: 'array',
      of: [
        {
          type: 'reference',
          to: [{ type: 'project' }],
          options: {
            filter: ({ document }) => {
              // Get value of designArea, if any
              if (!document.designArea) {
                // If no designArea has been set…
                return {
                  filter: 'visibility == $visibility',
                  params: { visibility: true },
                };
              }
              // If designArea has been set…
              return {
                filter: 'visibility == $visibility && area == $designArea',
                params: {visibility: true, designArea: document.designArea}
              }
            },
          },
        },
      ],
      validation: (Rule) => Rule.max(12),
    },
    {
      name: 'disabled',
      title: 'Disable?',
      type: 'boolean',
    },
  ],
  preview: {
    select: {
      disabled: 'disabled',
      project0: 'projects.0.title',
      project1: 'projects.1.title',
      project2: 'projects.2.title',
      project3: 'projects.3.title',
    },
    prepare: ({ disabled, project0, project1, project2, project3 }) => {
      const projects = [project0, project1, project2].filter(Boolean);
      const subtitle = projects.length > 0 ? projects.join(', ') : '';
      const hasMoreProjects = Boolean(project3);
      return {
        title: `Project Group`,
        subtitle: hasMoreProjects ? `${subtitle}…` : subtitle,
        media: (
          <span style={{ fontSize: '1.5rem' }}>
            {disabled || disabled == null ? ':skull:' : ':white_check_mark:'}
          </span>
        ),
      };
    },
  },
};