Проблема

У меня проблема с распознаванием стадии процента запросов, в этом примере я использую axios и применяю onUploadProgress: {} и передаю значения, когда я получаю эти значения, они переходят непосредственно к стадии 100%. Но в консоли запрос только начинается.

Код:

 const enviarPlanilha = async () => {
    var i = 0;
    while (i < items.length) {
      const options = {
        onUploadProgress: (progressEvent) => {
          const { loaded, total } = progressEvent;
          let percent = Math.floor( loaded * 100 / total );
          setPercentage(percent);
          console.log( `${loaded}kb of ${total} | ${percent}%` )
        }
      }
      await Axios.post("http://localhost:5000/pedidos", {
        origem: items[i].ORIGEM,
        pedido: items[i].PEDIDO,
        unidade_carga: items[i].UNIDADE_CARGA,
        unidade: items[i].UNIDADE,
        cliente: items[i].CLIENTE,
        quantidade_pedida: items[i].QUANTIDADE_PEDIDA,
        data_entrega: items[i].DATA_ENTREGA,
        data_embarque: items[i].DATA_EMBARQUE,
        incoterm: items[i].INCOTERM,
        peso: items[i].PESO,
        tipo_unidade_carga: items[i].TIPO_UNIDADE_CARGA,
        largura_uc: items[i].LARGURA_UC,
        comprimento_uc: items[i].COMPRIMENTO_UC,
        altura_uc: items[i].ALTURA_UC,
        produto: items[i].PRODUTO,
      }, options);
      i  ;
    }
  };

 

Индикатор выполнения рендеринга

 import React from "react";
import PropTypes from "prop-types";
import './Progress.css';

const Progress = ({ percentage }) => {
  return (
    <div className="progress tall">
      <div
        className="progress-bar progress-bar-striped bg-success"
        role="progressbar"
        style={{ width: `${percentage}%` }}
      >
        {percentage}%
      </div>
    </div>
  );
};

Progress.propTypes = {
  percentage: PropTypes.number.isRequired,
};

export default Progress;

 

Заранее спасибо!