React: как избежать проблем с производительностью при загрузке изображений в Cloudinary

Я написал код, который работает, но это не шедевр. У него огромные проблемы с производительностью. Как бы я с этим справился?

Проблемы

У меня проблемы с производительностью моего компонента:

1. Отправка нескольких изображений происходит очень медленно, когда я отправляю 5 изображений, это занимает около 1-2 минут.
2. Как я могу убедиться, что фотографии загружаются в Cloudinary только во время отправки? Потому что, например, когда пользователь выбирает фотографию А, а затем осматривается и выбирает фотографию Б, фотографии А и Б загружаются в облако.

Вопросы

Было бы неплохо отключить кнопку добавления альбома при передаче файлов в Cloudinary?

Пожалуйста, помогите мне решить эти две проблемы, и я хочу убедиться, что приложение работает без сбоев. Большое спасибо.

const AddAlbum = () => {

  const [fileUrl, setFileUrl] = useState();

  // MultipleFiles
  const [multipleFileUrl, setMultipleFileUrl] = useState([]);
 
  // cloudnary upload api endpoint
  const api_cloudinary =
    "https://api.cloudinary.com/v1_1/cloudinary_name/image/upload";

  
  // file upload
  const handleSingleFileUpload = async (files) => {
  

    const formData = new FormData();
    formData.append("file", files[0]);
    formData.append("upload_preset", "preset_number");
    // send cloudinary image and presets info
    const res = await fetch(api_cloudinary, {
      method: "POST",
      body: formData,
    });

    const file = await res.json();
    console.info(file);
    const fileUrl = await file.eager[0].url;
    setFileUrl(fileUrl);
  };
  console.info(fileUrl);
  // upload many files cloudnary
  // For now max amount of files is 20
  const handleMultipleFileUpload = async (files, amount) => {
    const formData = new FormData();

    for (let i = 0; i <= files.length; i++) {
      let file = files[i];
      formData.append("file", file);
      formData.append("upload_preset", ""preset_number"");

      const res = await fetch(api_cloudinary, {
        method: "POST",
        body: formData,
      });

      const cloudinaryFiles = await res.json();
      console.info(cloudinaryFiles);
      setMultipleFileUrl(cloudinaryFiles);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    console.info(
      `
      Album name:${albumName}
      color:${color}
      Background Image: ${fileUrl}
      files:${multipleFileUrl}
      `
    );
  };
 

И формы

 return (
    <Wrapper>
    
      <form onSubmit = {handleSubmit}>
       
    
        <div>
          <StyledLabel>Upload background image</StyledLabel>
          <DefaultInput
            type = "file"
            onChange = {(e) => handleSingleFileUpload(e.target.files)}
          />
        </div>
        <div>
          <StyledLabel>Upload background image</StyledLabel>
          <DefaultInput
            type = "file"
            onChange = {(e) => handleMultipleFileUpload(e.target.files)}
            multiple
          />
        </div>
       
        
        <StyledButton type = "submit">Submit</StyledButton>
      </form>
    </Wrapper>
  );
};