Several props doesn't work

[galih56]

I'm currently playing around with react-org-chart for my personal project to practicing my react knowledge. In the docs, it shows usage with class component. I tried to convert it to functional component. But i find "loadParent" and "loadChildren" are not working. I tried to console.log but it didn't run anything. event onClick also not working. In the example, the children nodes are expandable. But when i tried it myself, the children nodes can't be hidden and onClick event threw "s is not a function at SVGGElement.eval" error message.

function adjustCss() {
    var elmOrgChart = document.getElementById('react-org-chart');
    if (elmOrgChart) {
        if (elmOrgChart || elmOrgChart.childNoddes) {
            elmOrgChart.childNodes[0].setAttribute('viewBox', "0 0 922 330");
            elmOrgChart.childNodes[0].style.height = "100%";
            elmOrgChart.childNodes[0].style.overflow = "scroll";
        }
    }
}

export default function OccupationTree(props) {
    const [root, setRoot] = useState(null);
    const [data, setData] = useState([]);
    const [config, setConfig] = useState({ avatarWidth: 0 });

    function getChild(id) {
        var children = [];
        for (let i = 0; i < data.length; i++) {
            const occupation = data[i];
            if (occupation.id == id) {
                children = occupation.children;
                break;
            }
        }
        console.log('Children : ', children);
        return children;
    }

    function getParent(id) {
        var parents = [];
        for (let i = 0; i < data.length; i++) {
            const occupation = data[i];
            if (occupation.id == id) {
                parents = occupation.parents;
                break;
            }
        }
        return parents;
    }

    useEffect(() => {
        console.log('tree update : ',props.data);
        setData(props.data);
        for (let i = 0; i < props.data.length; i++) {
            const item = props.data[i];
            if (item.root == true) {
                setRoot(item);
                break;
            }
        }
    }, [props.data]);

    useEffect(() => {
        adjustCss();
    }, [data]);

    if (data.length > 0 && root != null) {
        return (
            <>
                <div className="zoom-buttons" style={{ textAlign: 'right' }}>
                    <IconButton id="zoom-in">
                        <AddIcon fontSize="small" />
                    </IconButton>
                    <IconButton id="zoom-out">
                        <RemoveIcon fontSize="small" />
                    </IconButton>
                </div>
                <OrgChart
                    tree={root}
                    onConfigChange={conf => {
                        setConfig(conf)
                    }}
                    onClick={(d) => {
                        console.log('tes')
                        console.log(d)
                    }}
                    loadConfig={d => config}
                    loadImage={d => {
                        return Promise.resolve(avatarPersonel)
                    }}
                    loadParent={d => {
                        console.log('loadParent : ', d);
                        return getParent(d.id);
                    }}
                    loadChildren={d => {
                        console.log('loadChildren : ', d);
                        return getChild(d.id);
                    }}
                />
            </>
        )
    } else {
        return (<></>)
    }
}

packages.json

{
  "name": "ta-pm",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "start-dev": "webpack serve --mode=development --open --config=webpack.config.js",
    "build-dev": "webpack --mode=production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "@babel/runtime": "^7.12.5",
    "@date-io/date-fns": "^2.10.6",
    "@date-io/moment": "^1.3.13",
    "@emotion/react": "^11.1.4",
    "@emotion/styled": "^11.0.0",
    "@material-ui/core": "^5.0.0-alpha.20",
    "@material-ui/data-grid": "^4.0.0-alpha.15",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^5.0.0-alpha.20",
    "@material-ui/pickers": "^3.2.10",
    "@unicef/react-org-chart": "^0.3.4",
    "axios": "^0.21.1",
    "d3": "^3.5.17",
    "date-fns": "^2.0.0-beta.5",
    "material-ui-dropzone": "^3.5.0",
    "moment": "^2.29.1",
    "notistack": "^1.0.4-alpha.0",
    "react-color": "^2.19.3",
    "react-data-grid": "^5.0.1",
    "react-dom": "^16.14.0",
    "react-number-format": "^4.4.1",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-transition-group": "^1.2.1",
    "react-vertical-timeline-component": "^3.3.1",
    "redux": "^4.0.5",
    "socket.io": "^3.0.3",
    "socket.io-client": "^3.1.0"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "@iconify-icons/mdi": "^1.1.1",
    "@iconify/react": "^1.1.3",
    "babel-core": "^6.26.3",
    "css-loader": "^5.0.0",
    "dotenv": "^8.2.0",
    "file-loader": "^6.1.1",
    "html-webpack-link-type-plugin": "^1.0.4",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.2.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.4",
    "style-loader": "^2.0.0",
    "webpack": "^4.0.0",
    "webpack-cli": "4.2.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[kalayu-ftsum]

any solution for this?