StrictMode与useEffect导致LocalStorage中生成两个团队项的问题咨询

各位大佬好，我正在开发一个宝可梦团队构建器，最近碰到个奇怪的问题，想请大家帮忙看看：

我在SelectedTeamBanner组件里写了个useEffect，逻辑很简单——检查用户的localStorage里有没有存团队数据，如果没有，就只创建一个默认团队存进去。结果实际运行的时候，localStorage里居然多出了两个团队项，完全不是我想要的效果。

下面是我组件里的相关代码：

import { useEffect } from 'react';
import { PokemonTeam } from '../../../../domain/teamMemberEntities';

export const SelectedTeamBanner = () => {
  useEffect(() => {
    // 从localStorage获取已存储的团队
    const storedTeams = localStorage.getItem('pokemonTeams');
    
    if (!storedTeams) {
      // 创建一个默认团队
      const defaultTeam: PokemonTeam = {
        id: Date.now(),
        name: "我的第一个宝可梦团队",
        members: []
      };
      // 存入localStorage
      localStorage.setItem('pokemonTeams', JSON.stringify([defaultTeam]));
    }
  }, []);

  // 组件其他渲染逻辑...
  return <div>团队横幅内容</div>;
};

我查了下资料，怀疑是不是React的StrictMode搞的鬼？毕竟开发环境下StrictMode会重复执行副作用函数，是不是因为这个导致useEffect跑了两次，所以创建了两个团队？有没有什么靠谱的办法能解决这个问题，确保哪怕在StrictMode下也只会创建一个团队呀？

备注：内容来源于stack exchange，提问作者Horacio García Magallanes