Нужна помощь в построении логики для таблицы реакции

У меня очень небольшая проблема, но я новый разработчик и впервые учусь реагировать, и мне очень трудно ее решить.

Проблема:

У меня есть компонент с именем Table, я визуализирую внутри него другой компонент с именем TableRow, перебирая другие элементы. В компоненте строки таблицы я визуализирую строки. У меня есть строки данных примерно так:

1: [a]
2: [a,b]
3: [a]

Я хочу вывести что-то вроде этого

1  a
2  a
   b
3  a

Я могу добиться такого результата

1  a
2  a
2  b
3  a

но получить точный результат очень сложно. В компоненте строки таблицы я просто просматриваю элементы и отображаю их, я должен включить логин, в котором я могу проверить, доступен ли заголовок для 2, не помещать его и вставлять только часть данных. Как этого добиться. Любая помощь будет оценена по достоинству. Спасибо.

data: [
{
  header: header
  items: [1]
},
{
   header: header2,
   items: [1,2]
 },
{
   header: header3,
    items: [1,2]
 }
 ]

Образец кода:

<Table>
    this.props.data.map(obj => {
        return <NewComponent header = {obj.header} items = {obj.items} />
    })
</Table>

<NewComponent> 
    this.props.items.map(item=> {
        <TableRow> 
                <th> {this.props.header} </th>
                <tb> {item} </tb>
        </TableRow>
    })
</NewComponent>

Текущий выход:

1 1
2 1
2 2 
3 1

я хочу

1  1
2  1
   2
3  1

Любая помощь будет оценена по достоинству.