Trouble accessing referenced item name in Sanity document preview

import PreviewComponent from "../../components/PreviewComponent";
import { FaStar as icon } from 'react-icons/fa';

export default {
  name: 'specialOffer',
  title: 'Special Offers',
  type: 'document',
  icon,
  fields: [
    {
      name: 'title',
      title: 'Offer Name',
      type: 'string',
      description: 'Title of the special offer',
    },
    {
      name: 'hotelId',
      title: 'Assigned Hotel',
      type: 'reference', 
      to: [{ type: 'hotel' }],
      options: {
        disableNew: true,
      },
    },
  ],
  preview: {
    select: {
      title: 'title',
      subtitle: 'hotelId._ref'
    },
    prepare(props) {
      const { title, subtitle } = props
      console.log('subtitle', subtitle)
      return {
        title: `${title}`,
        subtitle
      }
    }
  }
};

preview: {
    select: {
      title: 'title',
      subtitle: 'hotelId.name' // would give you the "name" of the referenced hotel if name is a field on the hotel document type
    }
   ... 
}

// if it is an array of assigned hotels
preview: {
    select: {
      title: 'title',
      subtitle: 'hotelId[0].name' // for first item in array of referenced hotels
    },
...
}