How to compress a tree traversal algorithm?

Question

JavaScript

Made a detour of the tree, looks terrible. It seems that recursion is visible, but I do not know how to convert it to a recursive method.

<TreeSelect
                dropdownStyle={{ maxHeight: "300px", overflowY: "auto" }}
                onChange={(value, label, extra) => {
                  let arrOfValues = [];
                  for (let i = 0; i <= value.length; i++) {
                    if (!isNaN(value[i])) {
                      arrOfValues.push(value[i]);
                    } else
                      for (const geo of treeProjData) {
                        if (value[i] === geo.value)
                          for (const sub of geo.children) {
                            for (const reg of sub.children) {
                              for (const loc of reg.children) {
                                for (const proj of loc.children) {
                                  arrOfValues.push(proj.id);
                                }
                              }
                            }
                          }
                        else {
                          for (const sub of geo.children) {
                            if (value[i] === sub.value) {
                              for (const reg of sub.children) {
                                for (const loc of reg.children) {
                                  for (const proj of loc.children) {
                                    arrOfValues.push(proj.id);
                                  }
                                }
                              }
                            } else {
                              for (const reg of sub.children) {
                                if (value[i] === reg.value) {
                                  for (const loc of reg.children) {
                                    for (const proj of loc.children) {
                                      arrOfValues.push(proj.id);
                                    }
                                  }
                                } else {
                                  for (const loc of reg.children) {
                                    if (value[i] === loc.value)
                                      for (const proj of loc.children) {
                                        arrOfValues.push(proj.id);
                                      }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                  }
                  handleChangeProjectId(arrOfValues);
                }}
                {...tProjects}
              />

Here is part of the structure of this tree.

Any ideas, solutions? Help me please

Answer 1

It's not easier to traverse the tree once and create a table
{
proj.id : [ loc.value, reg.value, sub.value, geo.value ],
...
}
Or vice versa,
{
value : [ ... arrOfValues ​​... ],
...
}
And quickly search through it instead of jumping the tree for each onChange?

Answer 2

1) Change for to forEach
2) Take out what is repeated in a separate function, for example, this (repeats essentially the same code 4 times)

for (const sub of geo.children) {
    for (const reg of sub.children) {
        for (const loc of reg.children) {
            for (const proj of loc.children) {
                arrOfValues.push(proj.id);
            }
        }
    }
}

Pass the required parameters accordingly