Trouble with previewing custom object in portable text block, resolved with help from community member

// objects/metric.js
import {IoTrendingUpOutline} from 'react-icons/io5'

export default {
  title: 'Metric',
  name: 'metric',
  type: 'object',
  icon: IoTrendingUpOutline,
  fields: [
    {
      title: 'Label',
      name: 'label',
      type: 'string'
    },
    {
      title: 'Key Number',
      name: 'keyNumber',
      type: 'string'
    },
    {
      title: 'Metric Type',
      name: 'metricType',
      type: 'string',
      options: {
        list: [
          {title: 'Number', value: 'number'},
          {title: 'Increase', value: 'increase'},
          {title: 'Decrease', value: 'Decrease'}
        ]
      }
    }
  ],
  preview: {
    select: {
      label: 'metric.label',
      keyNumber: 'metric.keyNumber',
      metricType: 'metric.metricType'
    },
    prepare (data) {
      let subtitlePrepend = ''
      switch (data.metricType) {
        case 'increase':
          subtitlePrepend = 'Increase in'
          break
        case 'decrease':
          subtitlePrepend = 'Decrease in'
          break
        default:
          subtitlePrepend = ''
          break
      }
      return {
        ...data,
        title: data.keyNumber,
        subtitle: subtitlePrepend && data.label.join(' ')
      }
    }
  }
}

...
  preview: {
    select: {
      title: 'keyNumber',
      label: 'label',
      metricType: 'metricType'
    },
    prepare ({title, label, metricType}) {
      return {
        title,
        subtitle: (metricType[0] !== 'number' ? `${metricType.charAt(0).toUpperCase() + metricType.slice(1)} in ` : ``) + label
      }
    }
  }
...

subtitle: `${metricType != 'number' ? `${metricType.charAt(0).toUpperCase() + metricType.slice(1)} in ` : '' }${label}`