Function works but won’t return HTML?

I have a component that returns the following code:

  <Popup
    toggled={moveFolderPopup}
    width="50%"
    close={() => setMoveFolderPopup(false)}
  >
    <div className="popup-title">
      {t('view.assets.moveFolderPopup.title')}
    </div>
    <div className="filebrowser-moveFolderPopup-hierarchy">
      {renderFolderStructure(indexFolder.id)}
    </div>
  </Popup>

The part that’s failing is renderFolderStructure(indexFolder.id)
The function looks as follows:

const renderFolderStructure = (parentId: string) => {
if (assetFolders !== []) {
  assetFolders.map((folder, i) => {
    if(folder.parentId === parentId) {
      console.log('why wont this work?');
      return <div>{folder.name}</div>;
    }
  });
} else {
  return <div>Error</div>;
}
};

Running this code the console prints out “Why wont this work?” 6 times for 6 folders that have matching parentIds. So everything works except that the function won’t return <div>{folder.name}</div>. I feel like I have done something like this a million times. What’s wrong here?