multiple file upload react

  const [progressInfos, setProgressInfos] = useState({ val: [] })
  const progressRef = useRef(null)
  const [uploadError, setUploadError] = useState(null)

  const [uploadVideo] = useMutation(
    gql`
      mutation UploadVideo($input: UploadVideoInput!) {
        uploadVideo(input: $input) {
          id
        }
      }
    `,
    {
      refetchQueries: ['VideosList'],
    },
  )

  async function upload(id, file) {
    const progression = [...progressRef.current.val]

    await uploadVideo({
      variables: {
        input: {
          name: file.name,
          projectId,
          file,
        },
      },
      context: {
        fetchOptions: {
          onProgress: function onprogress(event) {
            progression[id].percentage = Math.round(
              (event.loaded / event.total) * 100,
            )
            setProgressInfos({ val: progression })
          },
        },
      },
    })
  }

  function onSelectFiles(e) {
    e.preventDefault()

    const files = Array.from([...e.target.files])

    const progression = files.map(file => ({
      percentage: 0,
      fileName: file.name,
      size: file.size,
    }))

    progressRef.current = { val: progression }

    const uploadPromises = files.map((file, i) => upload(i, file))

    Promise.all(uploadPromises)
      .then(() => {
        setProgressInfos({ val: [] })
      })
      .catch(err => {
        setUploadError(err)
      })

    // reset the target value
    e.target.value = ''
  }