React 18.2 三级节点新建，新建后无法正常显示

我新建一个集合 集合里面会有树形控件，树形控件里面可以新建子节点
我想要在子节点下再新建子节点
我现在的结构是:
集合1 
  父节点
    子节点

下面是一些核心的代码
 const [treeData, setTreeData] = useState([]);// 初始化树形数据
  const [treeDataMap, setTreeDataMap] = useState({}); // 添加 treeDataMap 状态

在父节点下新建子节点
const ObjectSave = (data, nodeId, checkedList) => {
            debugger
            const treeDataForListItem = getTreeDataForListItem(nodeId); // 获取与目标列表项关联的树形数据
            //创建一个名为 addDataToNode 的函数，该函数将遍历树形结构并在找到匹配的节点时向其 children 数组中添加新节点。
            //在这个函数中，我们使用递归方式遍历树形结构，并搜索与指定节点 ID 匹配的节点。
            //一旦找到匹配的节点，我们将检查其 children 属性是否存在。如果不存在，则创建一个空数组。
            //然后，我们将新节点数据推送到 children 数组中，并终止循环。
            const addDataToNode = (data, nodeId, newNodeData) => {
              for (let i = 0; i < data.length; i++) {
                const item = data[i];
                if (item.value === nodeId) {
                  if (!item.children) {
                    item.children = []; // 如果子节点数组不存在则先创建一个
                  }
                  item.children.push(newNodeData);
                  break;
                } else if (item.children && item.children.length > 0) {
                  addDataToNode(item.children, nodeId, newNodeData);
                }
              }
            };
            const newNodeData = {
              title: (
                <span>
                  {data.FormName} 
                  <SolutionOutlined onClick={()=>showModalProDrawer(data) } style={{ marginLeft: '15px', marginRight: '5px' }}/>
                  {/* <SearchOutlined onClick={showModalMeta} style={{ marginLeft: '5px', marginRight: '5px' }}/> */}
                  <PlusCircleOutlined onClick={showModalInter} style={{ marginLeft: '5px', marginRight: '5px' }} /> 
                </span>
              ),
              value: randomId,
              children: [],
            };
            debugger
            //获取父节点的现有 children 数组并向其中添加新节点
            const newData = [...treeDataMap[nodeId]];
            //这将复制父节点的 children 数组，并将其存储在 newData 变量中。
            addDataToNode(newData, nodeId, newNodeData);
            //更新 treeDataMap 对象，以反映添加的更改。首先，复制 treeDataMap 对象并将更新后的 children 
            //数据设置为父节点的新值：
            const newTreeDataMap = { ...treeDataMap };
            newTreeDataMap[nodeId] = newData;
            //调用 setTreeDataMap 函数并将新的 treeDataMap 对象作为参数传递
            setTreeDataMap(newTreeDataMap);
          };

在子节点下新建子节点未成功
 const FormSave = (data, nodeId, checkedList) => {
      const treeDataForListItem = getTreeDataForListItem(nodeId); // 获取与目标列表项关联的树形数据
      //首先检查 treeDataMap 中是否存在对应的数据，如果不存在则设置为空数组
      if (!Array.isArray(treeDataMap[nodeId])) {
        treeDataMap[nodeId] = [];
      }
     
      const addDataToNode = (data, nodeId, newNodeData) => {
        for (let i = 0; i < data.length; i++) {
          const item = data[i];
          if (item.value === nodeId) {
            if (!item.children) {
              item.children = []; // 如果子节点数组不存在则先创建一个
            }
            item.children.push(newNodeData);
            break;
          } else if (item.children && item.children.length > 0) {
            addDataToNode(item.children, nodeId, newNodeData);
          }
        }
      };
      const newNodeData = {
        title: (
          <span>
            {data.FormName} 
            <SolutionOutlined onClick={()=>showModalProDrawer(data) } style={{ marginLeft: '15px', marginRight: '5px' }}/>
            {/* <SearchOutlined onClick={showModalMeta} style={{ marginLeft: '5px', marginRight: '5px' }}/> */}
            <PlusCircleOutlined onClick={showModalInter} style={{ marginLeft: '5px', marginRight: '5px' }} /> 
          </span>
        ),
        value: nodeId + "/" + randomId,
        children: [],
      };
      //获取父节点的现有 children 数组并向其中添加新节点
      const newData = [...treeDataMap[nodeId]];
      //这将复制父节点的 children 数组，并将其存储在 newData 变量中。
      addDataToNode(newData, nodeId, newNodeData);
      //更新 treeDataMap 对象，以反映添加的更改。首先，复制 treeDataMap 对象并将更新后的 children 
      //数据设置为父节点的新值：
      const newTreeDataMap = { ...treeDataMap };
      newTreeDataMap[nodeId].children= newData;
      //调用 setTreeDataMap 函数并将新的 treeDataMap 对象作为参数传递
      setTreeDataMap(newTreeDataMap);
      console.log("数据集合:",newTreeDataMap);
      setisModalOpenInter(false);
    };
问题就出在这个方法 传递进来的id值跟这个数组对象里面的值匹配不是，似乎要能匹配上才可以展示出来
 const getTreeDataForListItem = (id) => {
    debugger
     if (treeDataMap[id]) {
      return treeDataMap[id];
    }
    return [];
  };

渲染
<List style={{width:'50%',height:'600'}}
        itemLayout="horizontal"
        dataSource={listData}
        renderItem={(item, index) => (
        <Collapse bordered>
          <Panel header={item.title} key={index}>
            <List.Item.Meta
              avatar={<Avatar src={`https://xsgames.co/randomusers/avatar.php?g=pixel&key=${index}`} />}
              description="This is a solution project for generating Word documents"
          
          />
          {/* 在 TreeSelect 中通过 getTreeDataForListItem 函数获取子节点列表数据 */}
          <TreeSelect  {...tProps} onSelect={onSelect}  
          treeData={getTreeDataForListItem(item.value)} 
          />
          </Panel>
        </Collapse>

        )}
      />

我个人感觉是那个方法的问题，id值传入进去找不到这行数据就不会进行展示了。
失败的情况下数据结构展示

成功的情况下数据结构展示 在父节点上新建子节点

父节点和子节点

希望达到效果

请注意这个结构有集合与树形控件相互嵌套

• 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：React通过id匹配动态引入图片