How to fix the algorithm for table generation? - reactjs

Question

I have an algorithm for generating a table of two arrays.
data = [mail, cat, dog]
words = [{postman, mailbox, letter}, {kitty, kitten, koshak, kotyara}, {dog, friend}]
The number of "subarrays" in the words array is always equal to the number of elements in the data array.
The data array is the column headings, and the "subarrays" of words must be columns.
My generation algorithm works fine, but the "subarrays" in my implementation are obtained as rows, and as I said, I need to have columns.
<Paper style={{ maxWidth: 936, margin: "auto" }}>
<Table>
<TableHead>
<TableRow>
{data.map((TableRow, i) => (
<TableCell key={i} align="center">
{TableRow.split("_").join(" ")}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{this.state.array.map((user, i) => (
<TableRow key={i}>
{Object.values(user).map((v, j) => (
<TableCell key={j} align="center">
<IconButton>
<AddIcon/>
</IconButton>
{v}
<IconButton>
<RemoveIcon/>
</IconButton>
</TableCell>
))}
</TableRow>
))}
<TableRow>
<TableCell align="center">
<Button variant="contained"
color="primary"
style={{
background:
"linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)"
}}
>Обучить
</Button>
</TableCell>
</TableRow>
</TableBody>
</Table>
</Paper>