递归维护层次结构在数组中查找匹配元素：ReactJS

Question

我想使用输入字段在树中搜索。这个搜索应该在两个条件下递归发生：

1. 当叶节点匹配时，树应该显示直到该叶节点的所有节点。扩张。
2. 当中间节点或根节点匹配时，它应该只显示到折叠图标的那个级别，然后可以展开以查看其子级（如果存在）

绘制树的数组看起来像

const data = [
  { key: 1, name: "abc", categories: [] },
  { key: 2, name: "def", categories: [] },
  { key: 3, name: "lmn", categories: [{ key: 4, name: "pqr", categories: [] }] }
];

涉及搜索时如何控制树满足以上几点？

这是我尝试的搜索逻辑，

 function searchTree(tree, query) {
    function traverse(node, query) {
      if (node.categories) {
        traverse(node.categories, query);
      }
      return {
        ...node,
        categories: node?.categories?.filter(({ name }) => name === query)
      };
    }
    return tree.map((root) => traverse(root, query));
  }

如何使用此搜索功能的输出来实现上述几点？

我想在反应中递归地画这个。我是初学者，非常感谢帮助。

我之前提过一个问题，很遗憾没有得到回应

沙盒链接：https://codesandbox.io/s/tree-updated-with-search-forked-ms2b6w?