Полное отображение объекта неизвестной глубины (и наиболее эффективный способ определения глубины объекта)

У меня есть родительский объект с неизвестной глубиной дочерних элементов.

Моя конечная цель состоит в том, чтобы иметь возможность полностью map этого родительского объекта неизвестной глубины со всеми его уровнями дочерних элементов - как бы я это сделал?

Каждый дочерний элемент уже имеет свою глубину, связанную с ним как поле level, если это поможет.

Правильно ли я предполагаю, что мне нужно сначала найти глубину родительского объекта (т.е. самый большой уровень, который он содержит)? Каков наиболее эффективный способ сделать это?

Например. для объекта ниже родительский объект имеет окончательную глубину 2.

{
    "title": "parent",
    "level": 0,
    "children": [
        {
            "title": "foo",
            "level": 1,
            "children": [],
        },
        {
            "title": "foo1",
            "level": 1,
            "children": [],
        },
        {
            "title": "foo2",
            "level": 1,
            "children": [
                {
                    "title": "foo3",
                    "level": 2,
                    "children": [],
                }
            ],
        },
    ]
}

И я хотел бы в конечном итоге преобразовать это через map в React во что-то вроде:

<h1>parent</h1>
<h2>foo</h2>
<h2>foo1</h2>
<h2>foo2</h2>
<h3>foo3</h3>