Update a specific node in a tree structure in ReactJS

I want to update specific node in a tree structure and display the old tree and the new tree.

the problem how to update the children node.

updateNodeById(_idToUpdate, treeData, newNode, setNewTree)

this is what I tried:

import { Button } from "@mui/material";
import { useEffect, useState } from "react";
import DataTreeView from "./DataTreeView";
import "./styles.css";

const newNodeData = {
  _id: "632b1070f5380c54307081ab",
  title: "Card_0_1"
};

const nodesData = {
  _id: "63282ed33dd351a87c303ee4",
  title: "Card_0",
  children: [
    {
      _id: "632b1070f5380c54307081ab",
      title: "Card_0_0",
      children: []
    }
  ]
};

export default function App() {
  const [oldTree, setOldTree] = useState({});
  const [newTree, setNewTree] = useState({});

  useEffect(() => {
    setOldTree(nodesData);
    setNewTree(nodesData);
  }, []);

  const handleUpdate = (_id, currentNodesData, newNodeData) => {
    updateNodeById(_id, currentNodesData, newNodeData, setNewTree);
  };

  return (
    <div className="App">
      <DataTreeView treeItems={[oldTree]} />
      <h5>----------------------</h5>
      <Button
        onClick={() => handleUpdate(newNodeData._id, oldTree, newNodeData)}
      >
        Update
      </Button>
      <h5>----------------------</h5>
      {newTree && <DataTreeView treeItems={[newTree]} />}
    </div>
  );
}

function updateNodeById(_id, treeData, newElement, setNewTree) {
  setNewTree((currentTree) => {
    if (treeData._id === _id) {
      return { ...newElement, children: currentTree.children };
    }

    if (treeData.children !== undefined && treeData.children.length > 0) {
      for (let i = 0; i < treeData.children.length; i++) {
        return {
          ...currentTree,
          children: updateNodeById(
            _id,
            currentTree.children[i],
            newElement,
            setNewTree
          )
        };
      }
    }
  });

  return treeData;
}