Для запуска функции ReactJS требуется двойной щелчок мыши

У меня есть 2 функции: функция uploadFile загружает изображение файла в Firebase, а затем сохраняет возвращенный URL-адрес через setState, и функция saveTeam, которая отправляет запрос /new-team-member с полезной нагрузкой, включая возвращенный URL-адрес.

const uploadFile = async () => {
  const imageRef = storageRef(storage, `images/${UniqueComponentId()}`);
  uploadBytes(imageRef, team.image)
    .then((snapshot) => {
      getDownloadURL(snapshot.ref)
        .then((url) => {
          setTeam({ ...team, url: url || team.image });
        })
        .catch((error) => {
          console.info(error.message);
        });
    })
    .catch((error) => {
      console.info(error.message);
    });
};

const saveTeam = async () => {
  setSubmitted(true);
  let _teams = [...teams];
  let _team = { ...team };
  if (team.id) {
    await fetch('https://bunaq-api.vercel.app/api/edit-team-member', {
      method: 'PUT',
      body: JSON.stringify(team),
      headers: { 'Content-Type': 'application/json' },
    });
    const index = findIndexById(team.id);
    _teams[index] = _team;
    toast.current.show({
      severity: 'success',
      summary: 'Successful',
      detail: t('adminTeamPage.new.toastUpdated'),
      life: 5000,
    });
  } else {
    fetch('https://bunaq-api.vercel.app/api/new-team-member', {
      method: 'POST',
      body: JSON.stringify(team),
      headers: { 'Content-Type': 'application/json' },
    });
    _teams.unshift(_team);
    // location.reload();
    toast.current.show({
      severity: 'success',
      summary: 'Successful',
      detail: t('adminTeamPage.new.toastCreated'),
      life: 5000,
    });
  }
  setTeams(_teams);
  setTeamDialog(false);
  setTeam(emptyTeam);
};

const saveTeamMain = async () => {
  await uploadFile();
  saveTeam();
};

<button onClick = {saveTeamMain}>Save</button>;

Но когда я нажимаю Save в первый раз, он ничего не делает, а затем запускает функцию при втором нажатии, почему это происходит?