Данные таблицы становятся пустыми в React

Я новичок в React. Я пытаюсь создать таблицу. Мне удалось заполнить заголовок таблицы, но в теле таблицы я не могу заполнить строки и данные.

Это реальные данные -

 const [batsmanAgainstTeamContent, setBatsmanAgainstTeamContent] = useState([
    {
      ball: "20",
      runsOffBat: "32.0",
      striker: "abc"
    },
    {
      ball: "38",
      runsOffBat: "68.0",
      striker: "xyz"
    },
  ]);

Я думаю, что проблема в приведенном ниже фрагменте -

const tdData =() => {
    return batsmanAgainstTeamContent.map((item) => {
      return (
        <tr>
          {
            Object.keys(item).forEach((key) => {
            return <td>{item[key]}</td>
          })
          }
        </tr>
      )
    })   }

Далее ThData() работает нормально, а tdData() — нет.

`

return (
      <Container>
        <table className = "table">
          <thead>
            <tr>{ThData()}</tr>
          </thead>
          <tbody>{tdData()}</tbody>
        </table>
      </Container>

edit: работает при использовании карты вместо forEach