I've built a table with react-data-table-component that shows the user data. When I click a row on the right side a component is shown where we can see more info about the user. I want to change the background color of the clicked row and persist that until another row is clicked. How can I achieve it with react-data-table-component? I've already tried it with conditionRowStyles provided by the package but the style changes for every row. I want to change the bg of only the row I clicked Package I'm using: https://www.npmjs.com/package/react-data-table-component

const Table = () => {
  const onRowClick = (row, event) => {
    setSelectedCandidateId(row.user_id);
  };

  return (
    <DataTable
      title={title}
      columns={columns}
      data={candidates}
      selectableRows
      highlightOnHover
      onRowClicked={onRowClick}
      pointerOnHover
      keyField={"candidate_id"}
      paginationDefaultPage={currentPage}
      onSelectedRowsChange={onRowSelect}
      pagination
      paginationServer
      paginationTotalRows={totalRecords}
      onChangeRowsPerPage={handlePerRowsChange}
      onChangePage={handlePageChange}
      selectableRowsHighlight
      striped
    />
  );
};