React JS : Uncaught Error: Maximum update depth exceeded

I'm trying to display data on a table using React-table, but the page is blank, and the data is not rendering. I have checked the code thoroughly, but I can't seem to find the issue. Can someone please review my code and help me identify where it might be going wrong?

import React, { useState, useEffect, useMemo } from 'react';
import { useTable } from 'react-table';
import { useDispatch, useSelector } from 'react-redux';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { COLUMNS } from './Column';
import NavigationDashbooard from './UsersNavigationBigScreen';
import Button from '../components/Button';
import { loading } from '../assets';
import { fetchingAllUsers } from '../states/features/users/usersSlice';
import NavigationDashboardSmall from './UsersNavigationSmallScreen';

const AdminManageUserContainer = () => {

  const dispatch = useDispatch();
  const { isPending, totalpages, userList, networkError } = useSelector(
    (state) => {
      return state.users;
    }
  );
   const columns = useMemo(() => {
    return (COLUMNS, [])
  });
  const data = useMemo(() => {
    return (userList, [])
  });
  const tableInstance = useTable({ columns: columns, data: data });
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    tableInstance;

  useEffect(() => {
    dispatch(fetchingAllUsers(1));
  }, []);
 
  return (
    <div className='manage_accounts_wrapper h-screen'>
      <NavigationDashbooard />
      <div className='manage_accounts_content'>
        <h1 className='bigTitle_users  mt-10'>Manage Users</h1>
        <div className='createUserBox mb-10'>
          <h1 className='listOfUsers '>List of users</h1>
          <Button
            className='primary-btn create_user_btn'
            value='+  Add user'
            route='/'
            onClick={() => {}}
          />
          <Button
            className='create_user_btn_small'
            value='+'
            route='/'
            onClick={() => {}}
          />
        </div>
        <div className='manage_accounts_content_table h-4.5/6'>
          <table {...getTableProps()}>
            <thead>
              {headerGroups.map((headerGroup) => {
                return (
                  <tr {...headerGroup.getHeaderGroupProps()}>
                    {headerGroup.headers.map((column) => {
                      return (
                        <th {...column.getHeaderProps()}>
                          {column.render('Header')}
                        </th>
                      );
                    })}
                  </tr>
                );
              })}
            </thead>

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

          {isPending && (
            <div className='loading_div w-full'>
              Loading...
              <img src={loading} alt='' />
            </div>
          )}
          {networkError && (
            <div className='loading_div w-full'>
              Server or Network Error{' '}
              <FontAwesomeIcon icon='fa-solid fa-exclamation-circle' />
            </div>
          )}
        </div>
      </div>
      <NavigationDashboardSmall />
    </div>
  );
};
export default AdminManageUserContainer;

The problem seems to be related to how I am using react-table along with Redux to fetch and display data. I suspect there might be an issue with the columns and data variables, or possibly with the way I am using useTable from react-table.

Any help would be greatly appreciated. Thank you!

You are not getting the columns or the data in the way you use your useMemo.
Using a comma separator stands for: valuate all the expressions separated by commas and return the last one.

return (COLUMNS, [])
// this returns []

You should use useMemo in the correct way. First argument is a function which return a value, second one is the dependency array.

const columns = useMemo(() => {
  return COLUMNS;
}, []);

// short way of returning dataList
const data = useMemo(() => dataList, []);