Dynamic icon name

Im trying to use country-icons dynamically based on input, but Im having issues.

<script setup lang="ts">
import { Icon } from '#components'

const props = defineProps<{
  country: string
}>()

const icon = computed(() => {
  const icon = props?.country.toLowerCase()
  if (icon == 'northern ireland') {
    return 'ireland'
  }
  return icon
})
const FlagIcon = h(Icon, { name: 'twemoji:flag-' + icon.value, size: 18 })

</script>
<template>
  <FlagIcon />
</template>

This is working when loading the page SSR, but navigating to the page results in errors like this:
DR5f3n0Z.js:52 [Icon] failed to load icon 'twemoji:flag-hungary'

How can I create the icon names dynamically?

Start with the provided TypeScript script and the Nuxt Icon component, then reproduce the difference between SSR loading and client-side navigation using the dynamic twemoji:flag- name. Trace the icon loading path for navigation and verify that names such as twemoji:flag-hungary render without a client-side load error.