How to use the react-virtualized.SortDirection.DESC function in react-virtualized

orderedSections(sections) {
    const {sortBy, sortDirection} = this.state;

    // map dataKey to an accessor/sort function
    const sortFns = {
      fallback(section) { return section[sortBy]; }
      // grade(section) { return rankedByGradeLevel(section.grade); },
      // school(section) { return section.school.name; },
      // name(section) { return `${section.last_name}, ${section.first_name}`; }
    };
    const sortFn = sortFns[sortBy] || sortFns.fallback;
    const sortedRows = _.sortBy(sections, sortFn);

    // respect direction
    return (sortDirection == SortDirection.DESC) 
      ? sortedRows.reverse()
      : sortedRows;
  }

const sortFns = {
      fallback(student) { return student[sortBy]; },
      
      name(student) { return `${student.last_name}, ${student.first_name}`; },
      school(student) { return shortSchoolName(districtKey, student.school.local_id); },
      grade(student) { return rankedByGradeLevel(student.grade); },
      counselor(student) { return maybeCapitalize(student.counselor); },
      note(student) { return hasNote(student); } ,
      starred(student) { return isStarred(student); }
    };
    const sortFn = sortFns[sortBy] || sortFns.fallback;
    const studentsByName = _.sortBy(students, sortFns.name);
    const sortedRows = _.sortBy(studentsByName, sortFn);

    // respect direction
    return (sortDirection == SortDirection.DESC) 
      ? sortedRows.reverse()
      : sortedRows;
  }

{this.renderCaption()}
          
        
         list[index]}
          headerHeight={25}
          headerStyle={{display: 'flex', marginRight: 5}}
          rowHeight={25}
          style={{fontSize: 14}}
          rowStyle={this.renderRowStyle}
          sort={this.onTableSort}
          sortBy={sortBy}
          sortDirection={sortDesc ? SortDirection.DESC : SortDirection.ASC}
        >
           fullName(rowData)}
            cellRenderer={this.renderStudent}
            width={200}
            flexGrow={1}
          />
          
          <table height="{400}" width="{400}"></table>

useEffect(() => {
    setSortDirection(SortDirection.DESC);
  }, [plugins, sideView]);

columnMetadata && columnMetadata[key] && columnMetadata[key].rightAlign
                  ? rightAlignmentStyle
                  : {}
              }
              className={cx(styles && styles.headerRow)}
            >
              

              {label && sortable && (
                
                  
                
              )}
            
          
        
      );

      return React.cloneElement(col, col.props, newHeader);
    });

sort = ({ sortBy, sortDirection }: State) => {
    const data = _sortBy(this.props.data, [sortBy]);
    this.state.data =
      sortDirection === SortDirection.DESC ? data.reverse() : data;
    this.setState({ sortBy, sortDirection });
  };

onTableSort({defaultSortDirection, event, sortBy, sortDirection}) {
    if (sortBy === this.state.sortBy) {
      const oppositeSortDirection = (this.state.sortDirection == SortDirection.DESC)
        ? SortDirection.ASC
        : SortDirection.DESC;
      this.setState({ sortDirection: oppositeSortDirection });
    } else {
      this.setState({sortBy});
    }
  }

This page is no longer auto-updating.{" "}
              <span>
                Click here to see additional updates.
              </span>
            
          )}
        
    );
  }
<table>
      </table>

onTableSort({defaultSortDirection, event, sortBy, sortDirection}) {
    if (sortBy === this.state.sortBy) {
      const oppositeSortDirection = (this.state.sortDirection == SortDirection.DESC)
        ? SortDirection.ASC
        : SortDirection.DESC;
      this.setState({ sortDirection: oppositeSortDirection });
    } else {
      this.setState({sortBy});
    }
  }

sortWithState = ({ sortBy, sortDirection }) => {
    const lens = R.prop(sortBy);

    return R.sortWith([
      sortDirection === SortDirection.DESC ? R.descend(lens) : R.ascend(lens),
    ]);
  };