I'm trying to populate data from an array through a recursive function, and this function would get called upon each time the data or search value is updated. I understand that to avoid call stack being exceeded a base case should be established, but in my case I thought I had that covered. I have also tried out using an increment counter to reset the call stack when it hits a certain value, but that didn't seem to work.

How can I avoid the maximum call stack issue from occurring? Any help is greatly appreciated, thanks.

const filteredTreeData = useMemo(() => {
    function getObjects(array, target) {
      return array?.reduce((r, { title, key, children = [] }) => {
          if (title.toLowerCase().includes(target.toLowerCase())) {
              // Check and loop their children
              if (children?.length) {
                getObjects(children, target)
              } else {
                r?.push({ title, key });
              }
          }
          else return;
          children = getObjects(children, target);
          if (children?.length) {
             r?.push({ title, key, children })
          }
          return r;
    }, []);
  }
  return search.length > 0 ? getObjects(treeData, search) : treeData
}, [treeData, search])