function RenderFolders({data}){
    if(!data) return
    const res=[]
    res[0]= React.createElement('div', {className:'total-wrap folder-wrap', id:0})
    const arr=[data]
    
    while(arr.length!==0){
      const now=arr.pop()

      for(let key in now.children){
        arr.push(now.children[key])
        if(now.children[key].type==='folder'){
          res[now.children[key].id]= 
            <div className='folder' id={now.children[key].id}>
              <div>{key}</div>
              <div className='folder-wrap'></div>
            </div>
          res[now.id].appendChild(res[now.children[key].id])
        } else{
          res[now.children[key].id]= 
            <div className='file' id={now.children[key].id}>
              <div>{key}</div>
            </div>
          res[now.id].appendChild(res[now.children[key].id])
        }
      }
    }
    return res
  }

i fetched folder/file data and wanted to transform it to html element. The folder/file data is object type, which is sent as parameter. I tried to use dfs algorithm to referring folder/file structure, because I don't know how many folders/files is in a folder and what folders/files is in a folder. But I couldn't find a way.

Is there a way to make react element and dynamically append it to other element in dfs algorithm?