How to retrieve specific values from a document reference in GROQ query.

export default defineType({
  name: 'contents',
  title: 'Contents',
  type: 'document',
  fields: [
    defineField({
      name: 'tags',
      title: 'Tags',
      type: 'array',
      of: [{type: 'reference', to: [{type: 'tags'}]}],
    }),
  ],
})

*[_type == "contents" && tags[]-> title == "NextJS" ] {
...
}

*[_type == "contents" && tags[]->title == "NextJS"] {
 _id,
 title,
 "Titles": tags[]->title,
}

*[_type == "contents" ] {
 tags[]->{
   title
 }
}

**result**
  0:{…} 1 property
  tags:null
  1:{…} 1 property
    tags:[…] 2 items
      0:{…} 1 property
    title:flutter
      1:{…} 1 property
    title:NextJS
  2:{…} 1 property
    tags:null
  3:{…} 1 property
    tags:[…] 2 items
      0:{…} 1 property
        title:zustand
      1:{…} 1 property
        title:NextJS
  4:{…} 1 property
    tags:null
  5:{…} 1 property
    tags:null

*[_type == "contents" && tags[]->title match "NextJS"] {
 "Titles": tags[]->title,
}