How to fetch and render specific components from a document using groq and PortableText in the frontend.

 {
         title: 'Block Content',
         name: 'blockContent',
         type: 'array',
         of: [{type: 'hero'}, {type: 'platforms'}]
        }

    const main = await sanity.fetch(groq
    `
      *[_type == "homepage" ][1]{
        blockContent[_type == "hero"][0]
      }
    `
    )

<PortableText value={props.main} components={ptComponents} />

 Unknown block type "undefined", specify a component for it in the `components.types` prop

const ptComponents = {
    // Components for totally custom types outside the scope of Portable Text
    types: {
        hero: Main,
    },
  
    // Overrides for specific block styles - in this case just the `h2` style
    block: {
     
    },
  
    // Implements a custom component to handle the `schnauzer` list item type
    list: {
     
    },
  
    // Custom components for marks - note that `link` overrides the default component,
    // while the others define components for totally custom types.
    marks: {

    },
  }