Im having issues with a dynamic translation key. When I loop over an array of objects that share key names with translation keys. But when I loop over the array I get a type error. What is the best way to deal with the translations array? I feel that dynamically creating type is a work around.
What is the best way to deal with this?

import Link from 'next/link';
import { useTranslations } from 'next-intl';

interface DynamicListItem {
  translation: string;
  prop2: string;
}

const items: DynamicListItem[] = [{
    translation: 'tr-key-1',
    prop2: 'val 1',
  }, {
    translation: 'tr-key-2',
    prop2: 'val 2',
  }, {
    translation: 'tr-key-3',
    prop2: 'val 2',
  },
];

export async function ChildComponent() {
  const t = useTranslations('key1.child.menu');

  return (
    <ul>
      {items.map((li: DynamicListItem) => (
        <li key={'/link/' + li.prop2}>
          <Link href={li.translation}>
            { t(route.key) }
          </Link>
        </li>
      ))}
    </ul>
  );
}

Error:

Argument of type 'string | number | symbol' is not assignable to parameter of type 'MessageKeys<{ "tr-key-1": string; "tr-key-2": string; "tr-key-3": string; }, "tr-key-1" | "tr-key-2" | "tr-key-3">'.