Getting multi level json collection in astro

Question

I have a zones json file, that have multiple zone inside, what i want is when i go to "test.dev/zone1" i want it to filter the json file and only bring the zone1 information over

This is what i have tried so for with no success

Example zones.json file:

[
  {
    "id": "zone1",
    "size": "15",
    "containers": "1"
  },
  {
    "id": "zone1",
    "size": "30",
    "containers": "3"
  }
]

My schema is:

import { z, reference, defineCollection } from 'astro:content'

const zones = defineCollection({
  type: 'data',
  schema: z.array(
    z.object({
      id: z.string(),
      size: z.string(),
      containers: z.string(),
    })
  ),
})

export const collections = {
  zones,
}

then this is my page:

  ---
  import Layout from '../layouts/index.astro'
  import { CollectionEntry, getCollection } from 'astro:content'

  export const getStaticPaths = async () => {
    const zones = await getCollection('zones')
    const uniqueZones  = [
      ...new Set(zones.map((zone) => zone.data.id).flat()),
    ]
    return uniqueZones.map((zoneid) => {
      const filteredZones = zones.filter((zone) =>
        zone.data.id.includes(zoneid)
      )
      return {
        params: { zoneid: zoneid},
        props: { zone: filteredZones },
      }
    })
  }

const { zoneid} = Astro.params
const { zone} = Astro.props
  ---

  <Layout title="zones">
    {zone.data.size}
  </Layout>