Llamada de función asíncrona repetida dentro de un componente de clase.

He creado una función asíncrona para llamar a una API de clima que devolverá la información solicitada enviada. La función funciona bien, sin embargo, cuando llamo a esta función dentro de un componente de clase, el resultado se devuelve dos veces. Esto no es exactamente un error grave, pero preferiría no tener dos llamadas a la API si no es necesario y me pregunto por qué se llama a este método dos veces en primer lugar.

Aquí está mi código.

async function submitQuery(props) {
  //En caso de que decida agregar parámetros adicionales como ciudad, país, etc., he decidido colocar la propiedad zip en un objeto para poder simplemente
  //añade propiedades adicionales en el objeto de envío
  const submission = {
    zip: props,
  };

  if (!Number(props)) return console.log("esto no es un número");

  const { error } = await validate(submission);
  if (error) return console.log(error.message);

  const config = {
    method: "get",
    url: `https://api.openweathermap.org/data/2.5/weather?zip=${props}&appid=${apiKey}`,
    headers: {},
  };

  /*
  const query = await axios(config).then(function (response) {
    const result = response.data.main;
    return result;
  });
  */

  //console.log(query);
  return 4;
}

class WeatherReport extends React.Component {
  getResults = async () => {
    const result = await submitQuery("08060");
    console.log(result);
  };

  render() {
    return (
      <div classname="reportContainer">
        <weathercard getresults="{this.getResults}"></weathercard>
      </div>
    );
  }
}

const WeatherCard = ({ getResults }) => {
  getResults();
  return <div></div>;
};