score:1

you don't have keys in few place in this code.. e.g

{ headergroup.headers.map((column) => (
    <th
        classname={`p-2 table-header ${headercolor ? "primary-" + headercolor : "primary-deq"}`
        {...column.getheaderprops()}

another problem may be that your keys are not unique. when you use map you can use the second parameter which is the iteration number, this will guarantee that your keys will be unique. e.g

{headergroups.map((headergroup, i) => ( <tr {...headergroup.getheadergroupprops()} key={i}> ... 

// i instead of headergroup.id is unique

score:1

you need to add key props in each mapping. for e.g

{headergroups.map((headergroup) => {
  const { key, ...restheaderprops } = headergroup.getheadergroupprops();

  return (
    <tr key={key} {...restheaderprops}>
      {headergroup.headers.map((column) => {
        const { key, ...restcolumnprops } = column.getheaderprops();

        return (
          <th key={key} {...restcolumnprops}>
            {column.render("header")}
          </th>
        );
      })}
    </tr>
  );
})}

Related Query

More Query from same tag