how to update state by onclick function on column item

[Sumonche016]

` export const columns=[ {
Header: () => <div style={{ textAlign: "center" }}>Stats,
accessor: "emailTracks",
Cell: ({ row }) => {
const emailTracks = row.original?.emailTracks;
const openRateSum = emailTracks?.reduce(
(acc, curr) => acc + (curr.openRate ?? 0),
0
);
const clickRateSum = emailTracks?.reduce(
(acc, curr) => acc + (curr.clickRate ?? 0),
0
);
const replyRate = emailTracks?.reduce(
(acc, curr) => acc + (curr.reply ? 1 : 0),
0
);

  return (
    <div className="flex justify-center">
      <div className="bg-[#03C797] flex mr-2 relative justify-center items-center w-[25px] h-[25px] rounded-full">
        <HiOutlineMail size={16} color={"#fff"} />
        <div className="bg-[#008D67] flex absolute right-[-6px] top-[-8px] justify-center items-center w-[15px] h-[15px] rounded-full">
          <p className="text-white text-[12px] font-medium">
            {emailTracks?.length}
          </p>
        </div>
      </div>

      <div
        className="bg-[#F1DAF2] flex relative mr-4 justify-center items-center w-[25px] h-[25px] rounded-full"
        target="_blank"
        rel="noopener noreferrer"
      >
        <BsFillEyeFill className=" " size={16} color={"#E8A3E7"} />
        <div className="bg-[#008D67] flex absolute right-[-6px] top-[-8px] justify-center items-center w-[15px] h-[15px] rounded-full">
          <p className="text-white text-[12px] font-medium">
            {openRateSum}
          </p>
        </div>
      </div>

      <div onClick={this will be onclik}
        className="bg-[#C5EDEE] flex mr-4 relative justify-center items-center w-[25px] h-[25px] rounded-full"
        target="_blank"
        rel="noopener noreferrer"
      >
        <BsReplyFill className=" " size={16} color={"#3ECBC9"} />
        <div className="bg-[#008D67] flex absolute right-[-6px] top-[-8px] justify-center items-center w-[15px] h-[15px] rounded-full">
          <p className="text-white text-[12px] font-medium">{replyRate}</p>
        </div>
      </div>

      <div className="bg-[#03C797] flex mr-2 relative justify-center items-center w-[25px] h-[25px] rounded-full">
        <GiClick size={16} color={"#fff"} />
        <div className="bg-[#008D67] flex absolute right-[-6px] top-[-8px] justify-center items-center w-[15px] h-[15px] rounded-full">
          <p className="text-white text-[12px] font-medium">
            {clickRateSum}
          </p>
        </div>
      </div>

    </div>
  );
},

}]

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data });

{ // Loop over the table rows rows.map((row) => { // Prepare the row for display prepareRow(row); return ( // Apply the row props { // Loop over the rows cells row.cells.map((cell) => { // Apply the cell props return ( { // Render the cell contents cell.render("Cell") } ); }) } ); }) }

`