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 (<></>)
 }
}

{
 "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"
 ]
 }
}