Поиск по дереву, которое рисуется рекурсивно: reactJS

У меня есть дерево, которое рекурсивно рисуется с использованием массива объектов. Я могу поднять дерево со всеми функциями, связанными с расширением и свертыванием. Теперь я хочу выполнить поиск по дереву, используя элемент ввода. Этот поиск должен происходить рекурсивно. Когда листовые узлы совпадают, дерево должно отображать все узлы до этого листового узла. расширение. при сопоставлении промежуточного или корневого узла он должен отображаться только до этого уровня со свернутой иконкой, которую затем можно развернуть.

Это то, что я пробовал до сих пор.

Компонент узла

import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export const Node = ({ node, level, currentActive, setCurrentActive }) => {
  const [isOpen, setIsOpen] = useState(false);
  const hasChildren = !!node?.categories?.length;
  const categoryType =
    level === 0 ? "category" : !hasChildren ? "leaf" : "group";
  if (!node) return null;
  const { name, key, categories } = node;
  const activeClassName = currentActive === name ? "active" : "";

  return (
    <>
      <div
        className = {`list-row level-${level} ${categoryType} ${activeClassName}`}
        onClick = {() => {
          setIsOpen((open) => !open);
          if (!hasChildren) {
            setCurrentActive((prevName) => (!(prevName === name) ? name : ""));
          }
        }}
        key = {key}
      >
        <div className = "list-item-holder">
          {hasChildren && (
            <div className = "list-item-expander-holder">
              <span
                className = {`expand-collapse-icon ${
                  isOpen ? "collapse" : "expand"
                }`}
              >
                <span className = "expand-icon">
                  <FontAwesomeIcon icon = "caret-down" />
                </span>
                <span className = "collapse-icon">
                  <FontAwesomeIcon icon = "caret-right" />
                </span>
              </span>
            </div>
          )}
          <div className = "list-item-details-holder">{name}</div>
        </div>
      </div>
      {isOpen && hasChildren && (
        <div className = "list-row-children">
          {categories.map((node) => (
            <Node
              key = {node.key}
              node = {node}
              level = {level + 1}
              currentActive = {currentActive}
              setCurrentActive = {setCurrentActive}
            />
          ))}
        </div>
      )}
    </>
  );
};

Функциональность поиска, которую я пробовал до сих пор, которая не работает

 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?file=/src/DrawnTree.jsx:223-617