How to properly maintain a tree structure parallel to the React component tree

Question

I'm creating a framework agnostic library for 5-way navigation (navigating via direction keys). I want to have bindings for React and other JS frameworks and I started with React since I expect it to be the most difficult one.

The core of the library is a mutable tree. If a React component wants to participate in the navigation it can use a useNavigationNode(options) hook that should create and register the node with the tree on mount and remove it when the component unmounts.

I ran into problems trying to make it work via useEffect since children effects run before parent ones and I need the parent to exist in the tree before creating the child. I ended up creating the node in render and saving it in a ref if it doesn't already exist and cleaning it up in an effect.

export function useNavigationNode(options: NavigationItemOptions): NodeId {
  const { tree, parentNode } = useNavigationContext();

  const parent = options.parent ?? parentNode;

  // create node in tree on mount
  // its in render so parent nodes get created before children
  // (react runs children effects first)
  const nodeRef = useRef<NavigationItem | null>(null);

  // recreate the node if parent changes
  if (nodeRef.current !== null && nodeRef.current.parent != parent) {
    removeNode(tree, nodeRef.current.id);
    nodeRef.current = null;
  }

  if (nodeRef.current === null) {
    nodeRef.current = createNode(tree, options.id, {
      parent,
      // ...
    });
  } else {
    // update node when options change
  }

  // nodeIds contain parent id so if parent changes the node also gets recreated
  // and the previous  one gets cleaned up
  const nodeId = nodeRef.current.id;

  // cleanup node from tree on unmount
  useEffect(() => {
    return () => {
      removeNode(tree, nodeId);
    };
  }, [tree, nodeId]);
}

I had to handle StrictMode double render/effect so I keep track of how many times the node was inserted/deleted and remove it only when the count reaches 0.

export function createNode(
  tree: NavigationTree,
  localId: NodeId,
  options: NodeOptions,
): NavigationNode {
  const globalId = createGlobalId(options.parent, localId);

  const existingNode = tree.nodes.get(globalId);
  if (existingNode != null) {
    // handle React StrictMode
    existingNode.count += 1;
    const count = existingNode.count;
    if (count > 2)
      console.warn(
        `creating duplicate node: ${globalId}, duplicates: ${count}`,
      );

    return existingNode;
  }

  // create and return new node
}

export function removeNode(tree: NavigationTree, globalId: NodeId) {
  if (globalId === tree.root) {
    throw new Error("cannot remove root node");
  }

  const node = tree.nodes.get(globalId);
  if (node == null) {
    return;
  }

  node.count -= 1;
  if (node.count > 0) {
    return;
  }

  // actually remove the node
}

This seems to work but it feels kinda hacky, it already breaks HMR and I'm not confident it doesn't violate any React rules.

Are there any problems/bugs I'm about to run into? Does anyone have experience with maintaining a tree structure parallel to the React component one or know of a library that does that correctly?