How to make a tree select option – reactjs

I want to make a select/option nested with a json:

{
            "id": 11,
            "title": "A",
            "parent_id": null,
            "is_active": 1,
            "children": [
                {
                    "id": 12,
                    "title": "B",
                    "parent_id": 11,
                    "is_active": 1,
                    "children": [
                        {
                            "id": 13,
                            "title": "C",
                            "parent_id": 12,
                            "is_active": 1
                        },
                        {
                            "id": 14,
                            "title": "D",
                            "parent_id": 12,
                            "is_active": 1
                        },
                        {
                            "id": 15,
                            "title": "G",
                            "parent_id": 12,
                            "is_active": 1
                        },
                        {
                            "id": 16,
                            "title": "H",
                            "parent_id": 12,
                            "is_active": 1
                        },
                        {
                            "id": 62,
                            "title": "I",
                            "parent_id": 12,
                            "is_active": 1
                        }
                    ]
                },
                {
                    "id": 17,
                    "title": "J",
                    "parent_id": 11,
                    "is_active": 1,
                    "children": [
                        {
                            "id": 18,
                            "title": "K",
                            "parent_id": 17,
                            "is_active": 1
                        },
                        {
                            "id": 19,
                            "title": "L",
                            "parent_id": 17,
                            "is_active": 1
                        },
                        {
                            "id": 20,
                            "title": "M",
                            "parent_id": 17,
                            "is_active": 1
                        },
                        {
                            "id": 21,
                            "title": "N",
                            "parent_id": 17,
                            "is_active": 1
                        }
                    ]
                }
            ]
        }

I want to create below result:

<select>
<optgroup label=“A”>
<optgroup label=“B”>
     <option>C</option>
     <option>D</option>
     <option>G</option>
</optgroup>

<optgroup label=“J”>
     <option>K</option>
     <option>L</option>
     <option>M</option>

</optgroup>
</optgroup>
</select>

my code:

console.log(this.makeTreeOptionSele(undefined,data))

makeTreeOptionSele(result, obj) {

    if (obj.children) {
        result += "<optgroup label={"+obj.title+"}>"
            {this.getOptionChilds(obj.children)}
        "</optgroup>"
    }

    if(result)
        return result

}

getOptionChilds(childrens) {
    var result = null
    for (var i = 0; i < childrens.length; ++i) {
        var child = childrens[i]
        result +="<option value={"+child.id+"}>{"+child.title+"}</option>"
        if (child.children) {
            return this.makeTreeOptionSele(result, child)
        }
    }

    return result
}

but it does’t return result.

Answer

function makeTreeOption(tree) {
  let ouput = `<optgroup label="${tree.title}">`;
  if (tree['children']) {
    tree.children.forEach(children => {
      if (children['children']) {
        ouput += makeTreeOption(children);
      } else {
        ouput += `<option>${children.title}</option>`;
      }
    });
  }
  ouput += `</optgroup>`;
  return ouput;
}