我尝试使用fetch和async arrow函数调用Rick & Morty API，但我发现该函数将两次接收到的元素推入我的数组。我已经尝试使用和不使用useEffect（我使用React with TypeScript）进行调用，但没有结果，我不明白为什么该函数被调用两次。
有人能解释一下为什么会这样吗？
data.ts:

import { PlanetInterface, ResidentsInterface } from "./data-interfaces";

export const planetsList: PlanetInterface[] = [];
export const residentsList: ResidentsInterface[] = [];

export const getPlanetById = async (planets: number[]) => {
  for (let planet of planets) {
    const response = await fetch(
      `https://rickandmortyapi.com/api/location/${planet}`
    );
    const planetData: PlanetInterface = await response.json();
    planetsList.push(planetData);
  }
  console.log(planetsList);
};

// export const getResidentsByPlanet = async (residents: string[]) => {
//   for (let resident of residents) {
//     const response = await fetch(resident);
//     const residentData = await response.json();
//     residentsList.push(residentData);
//   }
//   console.log(residentsList);
// };

app.tsx:

import { useEffect } from "react";
import { getPlanetById } from "./api/data";
import "./App.css";

function App() {
  useEffect(() => {
    getPlanetById([1, 2]);
  }, []);

  // getPlanetById([1, 2]);

  return <main className="container"></main>;
}

export default App;

预期产出：2个对象的阵列（ID为1和2的行星）
接收输出：4个对象的阵列（ID为1的行星两次，ID为2的行星也两次）
如果有人能帮助我理解为什么会发生这种情况，以及我如何才能修复它，我将非常感激。