¿Cómo combina este componente generics, render prop y composición FP?

interface DataListProps<T> {
  items: T[];
  filterFn?: (item: T) => boolean;
  sortFn?: (a: T, b: T) => number;
  children: (item: T, index: number) => React.ReactNode;
}

function DataList<T>({
  items,
  filterFn,
  sortFn,
  children,
}: DataListProps<T>) {
  let processed = [...items];
  if (filterFn) processed = processed.filter(filterFn);
  if (sortFn) processed = processed.sort(sortFn);
  return <>{processed.map((item, i) => children(item, i))}</>;
}

<DataList
  items={users}
  filterFn={u => u.active}
  sortFn={(a, b) => a.name.localeCompare(b.name)}
>
  {(user) => <UserCard key={user.id} user={user} />}
</DataList>