React TypeScript でパンくずリストをURLから動的に生成したい

前提・実現したいこと

React x Typescript x i18next-react x Material-UI でウェブサイトを制作しています。
その時、パンくずリストのmap関数及び、index、key辺りでエラーに悩まされています。

ページ切り替えによって、URLを基にパンくずリストの内容を動的に切り替えたいです。やり方が違うのでしょうか？

発生している問題・エラーメッセージ

32行目のreturn (<Link で始まる行のkey={index}の前の部分でエラーとなっています。

Failed to compile.

src\components\breadcrumbs.tsx
  Line 32:38:  Expected an assignment or function call and instead saw an expression  @typescript-eslint/no-unused-expressions

Search for the keywords to learn more about each error.

該当のソースコード

jsx
1import React, { useEffect } from 'react';
2import i18next from 'i18next'
3import { useTranslation } from 'react-i18next'
4import { Link, Route, useLocation } from 'react-router-dom';
5// import styles from './breadcrumbs.module.sass'
6import NavigateNextIcon from '@material-ui/icons/NavigateNext';
7import HomeIcon from '@material-ui/icons/Home';
8import { Box, Breadcrumbs} from '@material-ui/core';
9// import clsx from 'clsx'
10
11import ja_Trans from '../locales/ja/breadcrumbs.json'
12import en_Trans from '../locales/en/breadcrumbs.json'
13import cn_Trans from '../locales/cn/breadcrumbs.json'
14
15export function Translate() {
16    const { t } = useTranslation('breadcrumbs');
17    useEffect(() => {
18        i18next.addResources('ja', 'breadcrumbs', ja_Trans);
19        i18next.addResources('en', 'breadcrumbs', en_Trans);
20        i18next.addResources('cn', 'breadcrumbs', cn_Trans);
21    }, [])
22    const location = useLocation();
23    console.log("goto::", location.pathname);
24    return (
25        <Box mb={2}>
26            <Breadcrumbs maxItems={2} aria-label="breadcrumb" separator={<NavigateNextIcon fontSize="small" />}>
27                <Link to={"/"}>ホーム</Link>
28                {[
29                    { title: t('会社概要'), url: "/outline" },
30                    { title: t('サイトマップ'), url: "/sitemap" },
31                    // and more site
32                ].filter((dict) => { location.pathname.indexOf(dict.url) !== -1 }).map((PageItem, index) => {
33                    return (<Link key={index} to={PageItem.url}>{PageItem.title}</Link>);
34                })
35                }
36            </Breadcrumbs>
37        </Box>
38    );
39}
40
41class BreadcrumbsApp extends React.Component {
42
43    render() {
44        return <Translate />
45    }
46}

試したこと

直前の部分で、filter関数を消せばとりあえずエラーは回避できることが分かりました。仕様は満たせませんが。

補足情報（FW/ツールのバージョンなど）

create-react-app でプロジェクトを初期化しています。

package.json
1{
2  "name": "make",
3  "version": "0.1.0",
4  "private": true,
5  "dependencies": {
6    "@material-ui/core": "^4.11.4",
7    "@material-ui/icons": "^4.11.2",
8    "@testing-library/jest-dom": "^5.12.0",
9    "@testing-library/react": "^11.2.7",
10    "@testing-library/user-event": "^12.8.3",
11    "@types/jest": "^26.0.23",
12    "@types/node": "^15.12.2",
13    "@types/react": "^17.0.11",
14    "@types/react-dom": "^17.0.7",
15    "babel": "^6.23.0",
16    "classnames": "^2.3.1",
17    "clsx": "^1.1.1",
18    "eslint": "^7.28.0",
19    "eslint-plugin-prettier": "^3.4.0",
20    "history": "^4.10.1",
21    "i18next": "^20.3.1",
22    "prop-types": "^15.7.2",
23    "react": "^17.0.2",
24    "react-device-detect": "^1.17.0",
25    "react-dom": "^17.0.2",
26    "react-i18next": "^11.10.0",
27    "react-router-dom": "^5.2.0",
28    "react-router-hash-link": "^2.4.3",
29    "react-scripts": "4.0.3",
30    "typescript": "^4.3.2",
31    "wasm-loader": "^1.3.0",
32    "wasm-opt": "^1.2.0",
33    "web-vitals": "^1.1.2"
34  },
35  "scripts": {
36    "start": "react-scripts start",
37    "build": "react-scripts build",
38    "test": "react-scripts test",
39    "eject": "react-scripts eject",
40    "i18next-extract": "i18next 'src/**/*.{tsx,ts}'"
41  },
42  "eslintConfig": {
43    "extends": [
44      "react-app",
45      "react-app/jest"
46    ]
47  },
48  "browserslist": {
49    "production": [
50      ">0.2%",
51      "not dead",
52      "not op_mini all"
53    ],
54    "development": [
55      "last 1 chrome version",
56      "last 1 firefox version",
57      "last 1 safari version"
58    ]
59  },
60  "homepage": "/new_web/",
61  "devDependencies": {
62    "@babel/cli": "^7.14.5",
63    "@types/react-router-dom": "^5.1.7",
64    "@types/react-router-hash-link": "^2.4.0",
65    "@wasm-tool/wasm-pack-plugin": "^1.4.0",
66    "babel-cli": "^6.26.0",
67    "babel-plugin-i18next-extract": "^0.8.3",
68    "eslint-config-prettier": "^8.3.0",
69    "fs": "*",
70    "js-yaml": "^3.14.1",
71    "react-app-rewire-yaml": "^1.1.0",
72    "react-app-rewired": "^2.1.8",
73    "sass-loader": "^10.2.0",
74    "workerize-loader": "^1.3.0"
75  },
76  "babel": {
77    "presets": [
78      "react-app"
79    ],
80    "plugins": [
81      [
82        "i18next-extract",
83        {
84          "locales": [
85            "ja",
86            "en",
87            "cn"
88          ],
89          "outputPath": "./src/locales/{{locale}}.json"
90        }
91      ]
92    ]
93  }
94}
95

ts.config.json
1{
2  "compilerOptions": {
3    "target": "es5",
4    "lib": [
5      "dom",
6      "dom.iterable",
7      "esnext"
8    ],
9    "allowJs": true,
10    "skipLibCheck": true,
11    "esModuleInterop": true,
12    "allowSyntheticDefaultImports": true,
13    "strict": true,
14    "forceConsistentCasingInFileNames": true,
15    "noFallthroughCasesInSwitch": true,
16    "module": "esnext",
17    "moduleResolution": "node",
18    "resolveJsonModule": true,
19    "isolatedModules": true,
20    "noEmit": true,
21    "jsx": "react-jsx"
22  },
23  "include": [
24    "src"
25  ]
26}
27