Map.prototype.forEach() не работает при создании html-элементов в Astro

Я пишу небольшой сайт на платформе Astro. У меня есть список «Точек приема документов». Раньше я просто сохранял их в переменной offices = [ {} , {} , {} ]. Я вывожу их во внешний интерфейс следующим образом:

// Here the offices is an Array

<select size='2'>)
  { offices.map( (i) => <option value = {i.id}> {i.name} </option> ) }
</select>

Теперь я пытаюсь сделать то же самое через Map().foreach(), но ничего не получается:

// Offices.ts

const offices: Map<string, office> = new Map()

const volskaya: office = {
  id: 'volskaya',
  name: 'name',
  address: 'address',
  phone: '+x (xxx) xxx-xx-xx',
  phoneUrl: 'tel:+xxxxxxxxxxx',
  working: ''
}

const rabochaya: office = {
  id: 'rabochaya',
  name: 'name',
  address: 'address',
  phone: '+x (xxx) xxx-xx-xx',
  phoneUrl: 'tel:+xxxxxxxxxxx',
  working: ''
}

offices.set('volskaya', volskaya)
offices.set('rabochaya', rabochaya)

export {offices}


// Component.astro
---
import { offices } from "./offices";
---

<select>)
  { offices.forEach( (i) => <option value = {i.id}> {i.name} </option> ) } // not working
</select>

В то же время, если я вывожу данные в console.info(), все отображается так, как должно:

offices.forEach((i)=> console.info(i.id,i.name)) // working

Я не могу этого понять. Либо существует какое-то ограничение на использование Map(), либо я неправильно использую Map().