array of references in Sanity NextJS

Question

I need to render my array of references from Sanity! When i do this on Sanity Vision all good but how can I render this in my NextJs code... I have first page with countries and each country has referenced array of agencies... So on my second page I need this referenced agencies and on next dynamic route I need agency info. So its like Category - Products - Product. Nothing out of this World! Stuck on this - please help!

Here is my Sanity schema...

const country = {
name: 'country',
title: 'Country',
type: 'document',
fields: [
    {
        name: 'countryName',
        title: 'Country Name',
        type: 'string'
    },
    {
        name: 'slug',
        title: 'Slug',
        type: 'slug',
        options: { source: 'countryName' }
    },
    {
        name: 'cardImage',
        title: 'Card Image',
        type: 'image',
        options: { hotspot: true },
    },
    {
        name: 'desktopImage',
        title: 'Desktop Image',
        type: 'image',
        options: { hotspot: true },
    },
    {
        name: 'avatarImage',
        title: 'Avatar Image',
        type: 'image',
        options: { hotspot: true },
    },
    {
        name: 'relatedAgencies',
        title: 'Related Agencies',
        type: 'array',
        of: [{type: 'reference',to:[{type:'agency'}]}]
    }
]

}

export default country