Problema no Upload de uma Array de imagens React

Olá a todos,
Tenho mais um problema para compartilhar com vocês.
Estou desenvolvendo um E-Commerce com React, e no cadastro de produto preciso adicionar varias imagens para o mesmo produto. Como estou usando Firebase como base, pensei em fazer o upload dos arquivos, pegar a URL gerada pelo Storage e gravar esses endereços no cadastro usando Array.
Mas me deparei com um problema meio estranho. Estou usando isso const [files, setFiles] = useState([]) para receber as informações dos arquivos. Porem, quando inicio a pagina do cadastro e adiciono as imagens o sistema não consegue adicionar nesse Array, ele passa vazio, se logo em seguida eu adicionar mais um arquivo, o Array é carregado com tudo que tinha antes.

Console com setFile em branco
Capturar
Console com setFile com os dados depois de uma segunda tentativa
Capturar1

Abaixo os códigos da pagina que estou usando.

import React, { useEffect, useState } from 'react';

import { Link, Redirect } from 'react-router-dom';

import { useDispatch } from 'react-redux';

import { addProductStart, fetchProductsStart } from './../../../store/reducers/Produtos/products.actions';

import FormInput from './../../../loja/componentes/forms/FormInput';

import FormSelect from './../../../loja/componentes/forms/FormSelect';

import { Carousel } from 'react-responsive-carousel';

import "react-responsive-carousel/lib/styles/carousel.min.css";

import userIMG from './../../../loja/assets/user.png';

import CKEditor from 'ckeditor4-react';

import fbConfig, { storage } from '../../../fbConfig';

import firebase from 'firebase';

const AdminNovoCadastroProdutos = props => {

  const dispatch = useDispatch();

  const [tasks, setTasks] = useState([])

  const [files, setFiles] = useState([])

  const [productType, setProductType] = useState('solar');

  const [productName, setProductName] = useState('');

  const [productThumbnail, setProductThumbnail] = useState([]);

  const [productPrice, setProductPrice] = useState(0);

  const [productQuantidade, setProductQuantidade] = useState(0);

  const [productVoltagem, setProductVoltagem] = useState(0);

  const [productDesc, setProductDesc] = useState('');

  var gravado = false;

  const onFileChange = e => {

    var newFile = [];

    const itensCopy = Array.from(tasks);

    for (let i = 0; i < e.target.files.length; i++) {

      console.log(i)

      newFile = e.target.files[i];

      newFile["id"] = Math.random();

      console.log(newFile);

      // add an "id" property to each File object

      itensCopy.push({ value: newFile });

      setFiles(itensCopy);

    }

    onUploadSubmission();

  };

  function addNewTask(task) {

    const itensCopy = Array.from(productThumbnail);

    itensCopy.push({ id: productThumbnail.length, value: task });

    setProductThumbnail(itensCopy);

    console.log(itensCopy)

  }

  const onUploadSubmission = e => {

    // prevent page refreshing

    var flag = 0;

    const promises = [];

    files.forEach(file => {

      const uploadTask =

        storage.ref().child(`your/file/path/${file.name}`).put(file);

      promises.push(uploadTask);

      uploadTask.on(

        firebase.storage.TaskEvent.STATE_CHANGED,

        snapshot => {

          const progress =

            ((snapshot.bytesTransferred / snapshot.totalBytes) * 100);

          if (snapshot.state === firebase.storage.TaskState.RUNNING) {

            console.log(`Progress: ${progress}%`);

          }

        },

        error => console.log(error.code),

        async () => {

          const downloadURL = await uploadTask.snapshot.ref.getDownloadURL();

          addNewTask(downloadURL)

        }

      );

    });

    Promise.all(promises)

      .then(() => alert('All files uploaded'))

      .catch(err => console.log(err.code));

  }

  useEffect(() => {

    dispatch(

      fetchProductsStart()

    );

  }, []);

  const resetForm = () => {

    setProductType('mens');

    setProductName('');

    setProductThumbnail([]);

    setProductPrice(0);

    setProductDesc('');

    setProductQuantidade(0);

    setProductVoltagem(0);

    gravado = true;

  };

  const handleSubmit = e => {

    e.preventDefault();

    dispatch(

      addProductStart({

        productType,

        productName,

        productThumbnail,

        productPrice,

        productDesc,

        productQuantidade,

        productVoltagem

      })

    );

    resetForm();

  };

  return (

    <div className='bg-grey'>

      <div className='container '>

        <h2>Novo Produto</h2>

        <form onSubmit={handleSubmit}>

          <div className='col-sm-6'>

            <Carousel>

              <div>

                <img src={userIMG} />

                <p className="legend">Legend 1</p>

              </div>

              <div>

                <img src={userIMG} />

                <p className="legend">Legend 2</p>

              </div>

              <div>

                <img src={userIMG} />

                <p className="legend">Legend 3</p>

              </div>

            </Carousel>

            <label htmlFor="imagemPortfolio">Imagem Portfólio</label>

            <input type="file" multiple className="form-control-file" id="imagemPortfolio" onChange={onFileChange} />

          </div>

          <div className="col-sm-6">

            <FormInput

              label="Nome"

              type="text"

              handleChange={e => setProductName(e.target.value)}

              required

            />

            <FormSelect

              label="Tipo"

              options={[{

                value: "solar",

                name: "Placa Solar"

              }, {

                value: "kit",

                name: "Kit Solar"

              }]}

              handleChange={e => setProductType(e.target.value)}

              required

            />

            <CKEditor

              onChange={evt => setProductDesc(evt.editor.getData())}

            />

            <FormInput

              label="Preço"

              type="number"

              min="0.00"

              max="1000000.00"

              step="0.01"

              handleChange={e => setProductPrice(e.target.value)}

              required

            />

            <FormInput

              label="Quantidade"

              type="number"

              min="0"

              max="1000000"

              handleChange={e => setProductQuantidade(e.target.value)}

              required

            />

            <FormInput

              label="Voltagem Gerada"

              type="number"

              min="0.00"

              max="1000000.00"

              step="0.01"

              handleChange={e => setProductVoltagem(e.target.value)}

              required

            />

          </div>

          <br />

          <button type="submit" className="btn btn-primary">Salvar</button>

          <Link to='/admin/produtos'>

            <button className="btn btn-primary btn-cancelar">Cancelar</button>

          </Link>

        </form>

      </div>

      <br />

    </div>

  );

}

export default AdminNovoCadastroProdutos;