Сортировка массива со значениями состояния в React & JSX

Question

Я пытаюсь отсортировать строки таблицы и изменить каждый столбец, учитывая значение sortBy в состоянии.

Это мой штат:

state = {
  columnHeaders: ["Meat", "Protein", "Calories", "Carbohydrates", "Fat"],
  rows: [
    ["chicken breast", "25", "200", "37", "8"],
    ["fried chicken", "45", "450", "21", "16"],
    ["baked fish", "15", "250", "30", "9"]
  ],
  sortedBy: "",
  order: "desc",
  query: "all"
};

Функция в настоящее время фильтрует все столбцы, когда щелкается только один заголовок столбца, sortBy динамически изменяется, поэтому я не уверен, почему весь массив сортирует, а не только индекс

const { columnHeaders, rows, query, sortedBy, order } = this.state;

const newRows = query === "all" 
  ? rows
  : rows.filter(row => row[0].includes(query));

const sortedRows = sortedBy === ""
  ? newRows
  : newRows.sort((a, b) => {
   const valueA = a[columnHeaders.indexOf(sortedBy)];
   const valueB = b[columnHeaders.indexOf(sortedBy)];
    let sortedValue = 0;
    if (valueA < valueB) {
      sortedValue = -1;
    } else if (valueA > valueB) {
      sortedValue = 1;
    }
    if (order === "desc") {
      // if descending order, turn around the sort order
      sortedValue *= -1;
    }
    return sortedValue;
  });

Эта карта отображает переменную sortedRows

.

{
  sortedRows.map((row, i) => (
    <TableRow key={`thc-${i}`}>
      <TableItem row={row} />
    </TableRow>
  ));
}

исходный код