JSFiddle - React, Tailwind, and code Playground

HTML

<dl>
  <dt>
    <h3>Title A</h3>
    <dl>
      <dt>
        <h3>Title A- A</h3>
        <dl>
          <dt><a href="#">Item</a></dt>
          <dt><a href="#">Item</a></dt>
        </dl>
      </dt>
      <dt><a href="#">Item</a></dt>
      <dt><a href="#">Item</a></dt>
      <dt><a href="#">Item</a></dt>
      <dt><a href="#">Item</a></dt>
      <dt>
        <h3>Title B- A</h3>
        <dl>
          <dt><a href="#">Item</a></dt>
          <dt><a href="#">Item</a></dt>
        </dl>
      </dt>
      <dt><a href="#">Item</a></dt>
    </dl>
  </dt>
</dl>

JavaScript

function buildTree(node) {
    if (!node) return [];
    const h3 = node.querySelector(':scope > h3') || node.querySelector(':scope > a');
    let result = {
        title: h3.innerText,
        children: []
    };
    const array = [...node.querySelectorAll(':scope > dl > dt')];
    result.children = array.map(el => buildTree(el));
    return result;
}

console.log('da', buildTree(document.querySelector('dt')));