Recursive display of element hierarchy as a nested list

Given an array of objects, each containing an identifier, a name, and a link to a parent element, forming a tree structure. The task is to build a visual representation of this structure as a nested list <ul>/<li>, where the nesting reflects the hierarchy levels.

const First = () => {
  const ListData = [
    { id: 1, name: 'Element 1', parentId: null },
    { id: 2, name: 'Element 2', parentId: 1 },
    { id: 3, name: 'Element 3', parentId: 2 },
    { id: 4, name: 'Element 4', parentId: 3 },
    { id: 5, name: 'Element 5', parentId: 2 },
  ];

  return (
    <ul>
      <li>Element 1</li>
    </ul>
  );
};