我正在开发一个MOBA英雄计数器应用程序，我需要为一个团队找到一个英雄的常见计数器。
我有这样的东西：

[
    {
        "counters": [{"name": "a"}, {"name": "b"}, {"name": "k"}]
    },
    {
        "counters": [{"name": "a"}, {"name": "b"}, {"name": "y"}]
    },
    {
        "counters": [{"name": "a"}, {"name": "b"}, {"name": "c"}]
    },
    {
        "counters": [{"name": "a"}, {"name": "g"}, {"name": "f"}]
    },
    {
        "counters": [{"name": "x"}, {"name": "z"}, {"name": "y"}]
    }
]

我需要做的是找出最常见的具有相同name属性的计数器，并将它们显示在列表的顶部。因此，如果name: "a"重复3次，我希望能够按它排序并将其显示在列表的顶部。
问题是，我不知道如何做到这一点。有人能帮我吗？
这是我目前所掌握的情况：

const generateCounters = (hero) => {
  const positiveCounters = hero.counters.filter((counter) => parseFloat(counter.disadvantage.replace('%', '')) >= 0.00);
    
  return positiveCounters.map(counter => {
    return (
      <div className="relative-el">
        <img className="hero-image" src={`/assets/images/${replaceHeroName(counter.name)}.png`} alt="" width={86} />
        <p className="absolute-statistic">{counter.disadvantage}</p>
      </div>
    );
  });
}
    
const renderCounters = () => {
  return activeHeroes.map(hero => {
    return (
      <div className="hero-counters-container">
        <div className="relative-el header-hero">
          <img className="hero-image" src={`/assets/images/${hero.heroName.replaceAll(' ', "-").replace("'", "").toLowerCase()}.png`} alt="" width={86} />
        </div>
        <div className="counters-list">
          {generateCounters(hero)}
        </div>
      </div>
    );
  });
}

编辑：activeHeroes是保存上述json结构的变量。