React: isExpanded state changes on all rows when header button is clicked causing lag (v7)

[stephanie-saretsky]

Hello! Trying to figure out an issue with my table that uses expandable rows that happens when the user clicks a back button that uses next/router's router.back().

I have different row colours depending if the row is expanded or not. When the user clicks the back button that is within the header, all of the rows change colour and there is about a 1-2 second lag before the page navigates away. I checked my logs and this is because the row.isExpanded prop for every row changes from undefined to true on button click. Is there a way to prevent this behaviour? I tried with e.preventDefault() on button click before calling the router but no dice. I have buttons in cells and those operate as expected, it's just the buttons in the header causing this issue. Thanks!

 <thead>
        {headerGroups.map((headerGroup, i: number) => (
          <tr {...headerGroup.getHeaderGroupProps()} key={`group-${i}`}>
            {headerGroup.headers.map((column, i: number) => (
              <th
                {...column.getHeaderProps()}
                key={`column-${i}`}
                className="sticky top-24 z-10 rounded-none bg-[#EEEDE5] text-lg"
              >
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i: number) => {
          prepareRow(row);
          return (
<tr {...row.getRowProps()} key={`row-${i}`}>
              {row.cells.map((cell, i: number) => {
                return (
                  <td
                    {...cell.getCellProps()}
                    key={`cell-${i}`}
                    className={`${
                      row.isExpanded
                        ? "bg-[#172746] text-white"
                        : !row.canExpand
                        ? "bg-[#E4F1F3]"
                        : "bg-white"
                    }`}
                  >
                    {cell.render("Cell")}
                  </td>
                );
              })}
            </tr>
     );
        })}
      </tbody>

and button within column header:

 Header: ({ getToggleAllRowsExpandedProps }) => {
        return (
          <span
            // eslint-disable-next-line
            {...getToggleAllRowsExpandedProps()}
            className="flex flex-col"
          >
            {pathname?.includes("compare") && (
              <button
                type="button"
                onClick={(e) => {
                  e.preventDefault();
                  router.back();
                }}
                className="pb-4"
              >
                <ArrowLeftIcon height={20} width={20} />
              </button>
            )}
            Feature List
          </span>
        );
      },