Possible to use rc-tree in functional react component with react hooks?

Hi, is it possible to use rc-tree in functional react component with react hooks?
We have rewritten the example for a dynamic tree, but it doesn't display the children correctly.

Is it not advised to rewrite or is there a bug / other issue?

/* eslint-disable no-console, react/no-access-state-in-setstate, react/state-in-constructor */
import React, { useEffect, useState } from 'react';
import Tree from 'rc-tree';
import 'rc-tree/assets/index.css';

function generateTreeNodes(treeNode) {
  const arr = [];
  const key = treeNode.props.eventKey;
  for (let i = 0; i < 3; i += 1) {
    arr.push({ title: `leaf ${key}${i}`, key: `${key}${i}` });
  }
  return arr;
}

function setLeaf(treeData, curKey, level) {
  const loopLeaf = (data, lev) => {
    const l = lev - 1;
    data.forEach(item => {
      if (
        item.key.length > curKey.length
          ? item.key.indexOf(curKey) !== 0
          : curKey.indexOf(item.key) !== 0
      ) {
        return;
      }
      if (item.children) {
        loopLeaf(item.children, l);
      } else if (l < 1) {
        // eslint-disable-next-line no-param-reassign
        item.isLeaf = true;
      }
    });
  };
  loopLeaf(treeData, level + 1);
}

function getNewTreeData(treeData, curKey, child, level) {
  //curkey = 0-1
  // child = [{title: "leaf 0-10", key: "0-10"}]
  //treedata[1] = {title: "pNode 02", key: "0-1"}
  const loop = data => {
    if (level < 1 || curKey.length - 3 > level * 2) return;
    data.forEach(item => {
      if (curKey.indexOf(item.key) === 0) {
        if (item.children) {
          loop(item.children);
        } else {
          // eslint-disable-next-line no-param-reassign
          item.children = child;
        }
      }
    });
  };
  loop(treeData);
  setLeaf(treeData, curKey, level);
}

function Demo(props) {
  //   state = {
  //     treeData: []
  //     //   checkedKeys: []
  //   };

  const [treeData, setTreeData] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      setTreeData([
        { title: 'pNode 01', key: '0-0' },
        { title: 'pNode 02', key: '0-1' },
        { title: 'pNode 03', key: '0-2', isLeaf: true }
      ]);
    }, 100);
  }, []);

  //   componentDidMount() {
  //     setTimeout(() => {
  //       // this.setState(
  //       setTreeData(
  //         [
  //           { title: 'pNode 01', key: '0-0' },
  //           { title: 'pNode 02', key: '0-1' },
  //           { title: 'pNode 03', key: '0-2', isLeaf: true }
  //         ]
  //         //    checkedKeys: ['0-0']
  //       );
  //     }, 100);
  //   }

  //   onSelect = info => {
  //     console.log('selected', info);
  //   };

  //   onCheck = checkedKeys => {
  //     console.log(checkedKeys);
  //     this.setState({
  //       checkedKeys
  //     });
  //   };

  const onLoadData = treeNode => {
    console.log('load data...');
    return new Promise(resolve => {
      setTimeout(() => {
        getNewTreeData(
          treeData,
          treeNode.props.eventKey,
          generateTreeNodes(treeNode),
          2
        );
        setTreeData(treeData);
        resolve();
      }, 2000);
    });
  };

  //render() {
  //    const { treeData } = this.state;

  return (
    <div>
      <h2>dynamic render</h2>
      <Tree
        // onSelect={this.onSelect}
        //   checkable
        // onCheck={this.onCheck}
        //   checkedKeys={this.state.checkedKeys}
        loadData={onLoadData}
        treeData={treeData}
      />
    </div>
  );
}
//}

export default Demo;

Start with the functional Demo example and trace the Tree component's loadData flow, especially how treeData is updated after getNewTreeData mutates it. Reproduce the delayed child-loading behavior with the provided example and determine whether the children render correctly after the promise resolves. Done means functional components using hooks can load and display dynamic children, with the example behavior confirmed.