Finishing the Orchestrating Component

import * as React from "react";
interface ISearchSortAndFilterProps {
  title: string;
  data: Array<T>;
  renderItem: (item: T) => ReactNode;
  searchLabel: string;
  initialSearchQuery: string;
  searchKeys: Array<keyof T>;
  sortersLabel: string;
  initialSortProperty: keyof T;
  initialIsDescending: boolean;
  filtersLabel: string;
  initialFilterProperties: Array<IFilter<T>>
}
export function SearchSortAndFilter(props: ISearchSortAndFilterProps) {
  const { 
    title, 
    data, 
    renderItem, 
    searchLabel, 
    initialSearchQuery, 
    searchKeys, 
    sortersLabel, 
    initialSortProperty, 
    initialIsDescending, 
    filtersLabel, 
    initialFilterProperties 
  } = props;
  // each of these components 'works', but each controls it's own list
  // furthermore, only one type of organization can work on each list
  // at a time: only one of search, sort, or filter on it's own respective list
  return (
    <>
      <h2>{title}</h2>
      <SearchInput
        data={data}
        renderItem={renderItem}
        label={searchLabel}
        initialSearchQuery={initialSearchQuery}
        searchKeys={searchKeys}
      />
      <Sorters
        data={data}
        renderItem={renderItem}
        label={sortersLabel}
        initialSortProperty={initialSortProperty}
        initialIsDescending={initialIsDescending}
      />
      <Filters
        data={data}
        renderItem={renderItem}
        label={filtersLabel}
        initialFilterProperties={initialFilterProperties}
      />
    </>
  );
}