Предварительный просмотр в React (картинки)

Не могу понять как сделать так чтобы картинки отображались до того как отослать их на сервер. Я пытался через useState сделать, но видимо плохо понимаю как он работает еще. Хук не обновляется. Читал про useEffect но так и не понял, для чего его применять, и как!?

import React, { useState } from 'react';
import "./DownloadFile.css"
function DownloadFile() {
   const [drag, setDrag]=useState(false)
    const [imgArray,setImgArray]=useState();
    const [imgList,setImgList]=useState([]);
   const [data,setData]=useState()
const [count,setCount]=useState(0);

   function buttonGreen(e){
      e.target.classList.toggle('buttonGreen')

   }
    function dragStartHandler(e) {
       e.preventDefault()
        setDrag(true);
    }

    function dragLeaveHandler(e) {
        e.preventDefault()
        setDrag(false);
    }
  **function onDropHandler(e) {
       e.preventDefault()
        let files =[...e.dataTransfer.files];
       let arrayImg=[];
      for (let i=0;i<files.length;i++){
          console.log(i+'  '+files[i])
          let reader = new FileReader();
          reader.readAsDataURL(files[i]);
          reader.onloadend = function() {
              arrayImg.push( React.createElement('img', {src:reader.result},))
          }

      }
 setImgList(React.createElement('div', {},arrayImg));
      console.log(arrayImg)
    }**



async function sendData() {
    let formData = new FormData();
    for (let file of imgArray) {
        formData.append(file.name, file);

        let promise = await fetch('http://localhost:5000/uploadImg', {
            method: 'POST',
            body: formData
        });
    }
}




    return (
        <div>
            {count}

            {imgList}
            {
                drag
                ? <div
                        onDragStart={e=>dragStartHandler(e)}
                        onDragLeave={e=>dragLeaveHandler(e)}
                        onDragOver={e=>dragStartHandler(e)}
                        onDrop={e=>onDropHandler(e)}
                        className='drop-area'>Отпустите файл чтобы загрузить их </div>
                :<div
                    onDragStart={e=>dragStartHandler(e)}
                    onDragLeave={e=>dragLeaveHandler(e)}
                    onDragOver={e=>dragStartHandler(e)}
                    >Перетащите файл, чтобы загрузить их</div>
            }

            <input type='time' className='begin'/>-<input type='time' className='end'/>
            <br/>
            <textarea placeholder='Напишите об организации'/>
            <br/>
            <button onClick={sendData}>Отправить</button>
        </div>
    )

}
export default DownloadFile;