ACE component not updating

I had assumed that the ACE react component would update the same way as if I had written it in forge.

In my ACE version, i am finding the UI is not updating when the variables are set within useEffect. Is there a special way to do the same using ACE?

useEffect(() => {
    if (currentFolderId)
     axios({
      method: 'get',
      url: "https://[SOME URL].live/box-rest/folderItems?root=" + currentFolderId
      }).then((res) => {
        setFolders(res.data.entries.filter(item => item.type == 'folder'));
        setFiles(res.data.entries.filter(item => item.type == 'file'));
      })
      .catch(err => onRequestError(err))
  }, [currentFolderId]);

  return <Fragment>
                <Breadcrumbs>
                   <BreadcrumbsItem text={page} />
                    {
                        boxCrumbs.map(crumb => 
                            <BreadCrumbItem text={crumb.name} />    
                        )
                    }  
                </Breadcrumbs>
            { 
                folders.map(item => 
                    {<Button appearance="link"
                        iconBefore={<FolderFilledIcon label="Folder icon" size="large" />}
                        onClick={ () =>setCurrentFolderId( item.id.toString() )
                    }>{item.name}</Button> }
                )
            }
            { 
                folders.map(item => 
                    {<Button appearance="link">{item.name}></Button> }
                )
            }
            </Fragment>;