Danoneko

если data просто импортируется, то выкинуть useEffect и написать
const [users, setUsers] = useState(data);

useEffect(()=>{
  retrieveGroups();
},[])

Добавляем стейт isCollapsed.
Рендерим isCollapse ? list.slice(0,3).map(mapcb) : list.map(mapcb)
пример:
https://codesandbox.io/s/admiring-wood-q4otq3?file...

слайсю прям отфильтрованный список

Используй функцию filter
data.filter(it => it.role === "student")

Когда массивы равны в js?
Или как сказали в ответах можно привести к строке и потом сравнивать.

const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
const arr3 = [3, 2, 1];

if (JSON.stringify(arr1) == JSON.stringify(arr2) || JSON.stringify(arr1) == JSON.stringify(arr3)) {
  alert('correct');
} else {
  alert('not right');
}

оператор == не сравнивает массивы поэлементно, он сравнивает ссылки, а они очевидно разные. Смый банальный способ сравнить такие небольшие массивы, это привести их к строке с помощью JSON.stringify() и сравнить строки

Вместо добавления в #elem нового контента следует полностью перезаписывать его содержимое:

document.querySelector('#elem').innerHTML = `
  <table>${Array.from({ length: 2 }, (_, iRow) => `
    <tr>${Array.from({ length: columns }, (_, iCol) => `
      <td>${iRow + 1}.${iCol + 1}</td>`).join('')}
    </tr>`).join('')}
  </table>
`;

Или, можно заранее создать таблицу с пустыми строками:

const table = document.createElement('table');
table.insertRow();
table.insertRow();
document.querySelector('#elem').append(table);

И добавлять недостающее или удалять лишнее:

for (const n of table.rows) {
  while (n.cells.length < columns) {
    n.insertCell().textContent = `${-~n.rowIndex}.${n.cells.length}`;
  }

  while (n.cells.length > columns) {
    n.lastElementChild.remove();
  }
}