Why typescript (tsx) doesn’t return html when map is using twice?

I've made array with chunks using this method:

  const newArray: Array<Array<any>> = [];

  for (let i = 0; i < codeData?.length; i++) {
    if (i % 3 === 1) {
      newArray.push([codeData[i - 1], codeData[i], codeData[i + 1]].filter(el => el !== undefined));
    }

  }

But when I try to map it twice It doesn't return HTML , but when I set the value of the last map to the console it returns what I need:

                 {newArray
                ?.slice(
                  page * rowsPerPage,
                  page * rowsPerPage + rowsPerPage
                )
                ?.map((arr: any) => {
                  arr
                    .filter((element) => element !== undefined)
                    .map((row: any) => {
                      return (
                        <TableRow
                          role="checkbox"
                          key={row.id}
                          className={classes.row}
                        >
                          {row.id}
                        </TableRow>
                      );
                    });
                })}

I guess it happened because typescript, as for as I know, has this dynamic - [] but when I'm using map twice it has - [[]].

Anybody can help me?

Read more here: https://stackoverflow.com/questions/66280543/why-typescript-tsx-doesnt-return-html-when-map-is-using-twice