React Table, Library Max Update Depth Exeeded

Question

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

I using React-Table Library and have tried a lot but couldn't resolve this code.

import React from 'react';
import {useTable} from 'react-table';

const RTableUi = () => {
  const data = [
    {
      id: 1,
      gender: 'Male',
      salary: '4,00,000'
    },
    {
      id: 2,
      gender: 'Female',
      salary: '5,00,000'
    },
    {
      id: 3,
      gender: 'Female',
      salary: '7,00,000'
    },
    {
      id: 4,
      gender: 'Male',
      salary: '20,00,000'
    },
  ];

  const columns = [
    {
      Header: 'ID',
      accessor: 'id'
    },
    {
      Header: 'Gender',
      accessor: 'gender'
    },
    {
      Header: 'Salary',
      accessor: 'salary'
    }
  ];

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

  const tableStyle = 'border border-separate border-cyan-400  table-auto';
  const dataStyle = 'border border-cyan-400';

  return (
    <>
      <div
        className="w-3/4 flex flex-col justify-center gap-8 items-center text-center bg-zinc-800 py-10 text-cyan-200">
        <h1 className="text-5xl"> Hello React Table</h1>

        <table {...getTableProps()} className={tableStyle}>
          <caption className=" caption-bottom pt-5">Table - This is User Table</caption>

          {/* table heading */}
          <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()} className={dataStyle}>
                  {column.render('Header')}
                </th>
              ))}
            </tr>
          ))}
          </thead>

          {/* table Body */}
          <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => (
                  <td {...cell.getCellProps()} className={dataStyle}>
                    {cell.render('Cell')}
                  </td>
                ))}
              </tr>
            );
          })}
          </tbody>
        </table>
      </div>
    </>
  );
}

export default RTableUi;