Как бы вы сгруппировали поле в таблице, чтобы оно не отображало дубликаты - реагируйте

На веб-странице группы выпускников я пытаюсь управлять командами, а в таблице команд у меня есть поля: год, команда_категория (футбол и т. д.) и участники (MtoM). Я пытаюсь показать на первой странице список категорий, но только по одной для каждого поля. Нажатие на кнопку категории приведет к списку команд, отфильтрованных по указанной категории, и покажет год и членов команды. Таким образом, мой пример ниже будет просто футболом, черлидингом, шахматами. Как сгруппировать по категориям или любому потенциально лучшему методу?

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { getTeams } from "../../../api/apiCalls";

const Teams = () => {
  const [teams, setTeams] = useState([]);
  useEffect(() => {
    getTeams()
      .then((response) => {
        console.info(response.data);
        setTeams(response.data);
      })
      .catch((error) => {
        console.info(error.message);
      });
  }, []);

  return (
    <div className = "">
      <h1>
        Teams
        <hr />
      </h1>
      {teams.map((teams, index) => (
        <div className = "" border = "" key = {teams.id}>
          <Link
            className = "btn btn-outline-dark btn-warning m-1"
            to = {`/dashboard/teams/${teams.category}/`}
          >
            {teams.category}
          </Link>
        </div>
      ))}
    </div>
  );
};

Вывод для моего кода