Next.js + TypeScriptで連想配列をmapで出力する

Question

環境

  "dependencies": {
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-router-dom": "^6.3.0"
  },
  "devDependencies": {
    "@types/node": "17.0.31",
    "@types/react": "18.0.8",
    "@types/react-dom": "18.0.3",
    "classnames": "^2.3.1",
    "typescript": "^4.6.4",
...省略
}

実現したいこと

getStaticProps()を使って連想配列を出力したいと考えています。
しかし、List.map(() => {の部分で
TypeError: Cannot read properties of undefined (reading 'map')
となってしまいます。
const CardList = ({ List }) => { のところで implicitly has an 'any' type となっているため、ここが原因なのは分かるのですがそれ以上のことが自分ではわからないため、ご教授いただければと思います。

ソースコード

export const List: { [key: string]: string }[] = [
  { "title": "hoge", "image": "hogehoge.jpg", "description": "hogehoge", },
  { "title": "piyo", "image": "piyo.jpg", "description": "piyopiyo", },
  { "title": "dummy", "image": "dummy.jpg", "description": "dummydummy", },
];

import React from 'react'
import List from '@/common/types/List'
import Card from '@/components/molecules/Card'
import { List } from '@/path-to/List'

type Props = {
  list: List[]
};

const CardList: React.FC<Props> = ({ list }) => {
  return (
    <ul>
    {
      list.map((item) => {
        <Card
        title = { item.title }
        media = { item.image }
        description = { item.description }
          />
    })
    }
    < /ul>
  )
}

export const getStaticProps: GetStaticProps = async () => {
  return { props: { list } };
}

export default CardList

type ListType = {
  title: string;
  image: string;
  description: string;
}

export default ListType

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'map')

参考にした記事

[Next.js]mapを使って連想配列を出力してみる
getStaticProps
blog-starter-typescript