cell hover event not getting triggered

 columnHelper.accessor((row) => row, {
      id: "email",
      cell: (row) => {
        const member = row.row.original as User;
        return (
          <div className="flex flex-col tooltip" data-tip={member.email}>
            <span className="">{member.fullName}</span>
            <span className="truncate md:w-[150px] max-md:w-full text-[#777777] text-sm font-normal">
              {member.email}
            </span>
          </div>
        );
      },
      header: "",
    }),

 <tbody className="flex flex-col gap-2">
        {tableInstance.getRowModel().rows.map((rowEl) => {
          return (
            <tr
              key={rowEl.id}
              className="flex flex-col md:justify-between users-table-row border border-black rounded-md shadow-md bg-white">
              {rowEl.getVisibleCells().map((cellEl, index) => {
                return (
                  <td
                    key={cellEl.id}
                    className={

}>
                    {flexRender(cellEl.column.columnDef.cell, cellEl.getContext())}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>