TypeScriptのmap()を使用した際のkeyエラー

Question

概要

現在、TypeScript + React + Material-UIを用いた開発を行っています。
その中でオブジェクトをmap()で回して表示しているのですが、下記の様なエラーが発生いたしました。
差分表示の際にユニークなkeyを使用した方がパフォーマンスがよくなるということは理解しているのですが、何か勘違いをしているのか、中々エラーが消えてくれません。
自分なりに色々しらべてみましたが解決せず…。
どなたか解決方法のご教授よろしくお願い致します。

エラーの内容

index.js:1 Warning: Each child in a list should have a unique "key" prop.

該当するコード

import React from 'react'
import { useSelector } from 'react-redux'
import styled from 'styled-components'

import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
import TreeView from '@material-ui/lab/TreeView'
import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
import ChevronRightIcon from '@material-ui/icons/ChevronRight'
import TreeItem from '@material-ui/lab/TreeItem'

const useStyles = makeStyles((theme: Theme) => createStyles({
  toolbar: {
    ...theme.mixins.toolbar
  },
}))

const History: React.FC = () => {
  const classes = useStyles()
  // historiesにはreduxのstoreから取得した、オブジェクトの配列が格納されています。
  const histories = useSelector((state: any) => state.HistoryReducer.histories)

  return (
    <Root>
      <div className={classes.toolbar} />
      <H1>購入履歴</H1>
      <TreeView
        defaultCollapseIcon={<ExpandMoreIcon />}
        defaultExpandIcon={<ChevronRightIcon />}
      >
        // ここです
        {
          histories.map((history: any, i: string) => (
            <>
              <TreeItem key={i} nodeId={i} label={`${history.date}　` + `${history.store.address}　` + `${history.company.name}　` + `¥${history.sum}`}>
                // ここです
                {history.products.map((product: any, j: string) => (
                  <>
                    <TreeItem key={j} nodeId={i} label={`${product.name}　　` + `¥${product.price}`}>
                    </TreeItem>
                  </>
                ))}
              </TreeItem>
            </>
          ))
        }
      </TreeView>
    </Root >
  )
}

const Root = styled.div`
  padding-bottom: 50px;
`

const H1 = styled.h1`
  text-align: center;
`

export default History

Answer 1

          histories.map((history: any, i: string) => (
            <>

のようになっていますので、キーは<>に与える必要があります。ただ、この記法のままではキーをセットできませんので、<React.Fragment key={i}>のようにしてください（閉じタグも</React.Fragment>とします）。