MUIのTypographyでhrefを使おうとしたら"この呼び出しに一致するオーバーロードはありません。"が出て詰まりかけた

タイトルの通りです。

発生状況

Next.jsにMUIを導入し、ResponsiveAppBarのサンプルコードをベースとして、AppBarのボタンにページ遷移用リンクを付与しようとした時に発生した。

補足: 正確にはボタンというよりレスポンシブデザインで画面が小さい場合に左上の「三」から選択できるメニュー

結論

• 上に書いた状況はあまり関係ないが、単純にTypographyの使い方が間違っていた。
• Typographyでhrefを使うときは、component="a"も同時に定義しないといけなかった。

エラーが出たプログラム

const pageItems = [
  {
    pageTitle: 'About',
    pageUrl: '/about'
  }
];

{pageItems.map((pageItem) => {
  const {pageTitle, pageUrl} = pageItem;
  return (
    <MenuItem key={pageTitle} onClick={handleCloseNavMenu}>
      <Typography 
        href={pageUrl}
        textAlign="center"
      >
        {pageTitle}
      </Typography>
    </MenuItem>
  );
})}

修正したプログラム

const pageItems = [
  {
    pageTitle: 'About',
    pageUrl: '/about'
  }
];

{pageItems.map((pageItem) => {
  const {pageTitle, pageUrl} = pageItem;
  return (
    <MenuItem key={pageTitle} onClick={handleCloseNavMenu}>
      <Typography 
        component="a"  // これが必要だった
        href={pageUrl}
        textAlign="center"
      >
        {pageTitle}
      </Typography>
    </MenuItem>
  );
})}