Цикл внутри JSX

У меня есть объект, подобный этому:

{
    id: number,
    kids: [{
        id: number,
        kids: [{
            id: number,
            kids: []
        }]
    }]
}

Таким образом, у него есть свойство kids, которое представляет собой массив дочерних элементов, каждый из которых может иметь свой собственный массив дочерних элементов. Мне нужно отобразить исходный объект в древовидном списке следующим образом:

<ul>
  {object.map(item => (
    <li>
      <p>{item.value}</p>
      {item.kids ?
        {item.kids.map(item => (
          <ul>
            <li>
              <p>{item.value}</p>
            </li>
          </ul>
        ))}
        : null
      }
    </li>
  ))}
</ul>

Таким образом, каждый элемент kids будет элементом <li></li> с <ul></ul> внутри него, если item.kids не является пустым массивом. Я мог бы продолжать в том же духе, но это довольно грязно, и, что более важно, я не знаю, когда именно свойство kids станет пустым массивом. Поэтому мне нужно как-то перебрать исходный объект и его свойства и сделать что-то вроде

while (kid.kids) {
  return {kid.kids.map(kid => (
           <li>
             <p>{kid.value}</p>
             <ul>
               kid.kids.map(kid => (
                 etc
               ))
             </ul>
           </li>
         }))
}

Но я не могу понять, как лучше зациклиться на этом.