Losing return on a Recursion function on HTML JavaScript

I have an object

{
   path: "",
   name: "",
   isFolder: true,
   childs: [
      {
         path: "assets",
         name: "assets",
         isFolder: true,
         childs: [
            {
               path: "assets/img",
               name: "img",
               isFolder: true,
               childs: [
                  {
                     path: "assets/img/logo.png",
                     name: "logo.png",
                     isFolder: false,
                     childs: [],
                  },
               ],
            },
            {
               path: "assets/txt",
               name: "txt",
               isFolder: true,
               childs: [
                  {
                     path: "assets/txt/logo.txt",
                     name: "logo.txt",
                     isFolder: false,
                     childs: [],
                  },
               ],
            },
         ],
      },
   ],
}

I called:

            node = GetDir("assets/img");
            document.getElementById("json").innerHTML = prettyPrintJson.toHtml(node);

which the function look like this

    let targerDir;

    function GetDir(path) {
        return FindNodeByPath(tree, path);
    }

    function FindNodeByPath(node, path) {
        for (let index = 0; index < node.childs.length; index++) {
            c = node.childs[index];
            if (c.path === path) {
                console.log(c)
                targetDir = c;
                return c;
            } else
                FindNodeByPath(c, path)
        }
        // return false;
    }

The result of node become undefined, but the console.log(c) has the correct value.

I saw some said, need to store that somewhere else(i tried to store it to targetDir and it work. But, there is noway to define each var for every access right?)

or stop the loop(?) and i tried add return false; at the end of the function, and it just return false.

what am i doing wrong?