React, Firebase, React Dropzone - Progress issue when uploading multiple files

Question

I am successfully uploading several files to Firebase using React-Dropzone.

The issue I'm facing is with the progress bar underneath each file which progresses with the same rate for all files.

I'm trying to map the progress for all child snapshots but with no success.

Upload Progress

The original code is:

files.forEach((files) => {
        const storageRef = firebase.storage().ref(`projects/${time}-${files.name}`).put(files);

        storageRef.on('state_changed',
            (snapshot)=>{
                const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes)*100);
                setProgress(progress);
            },
            (error)=>{console.log(error)},
            ()=>{
                setProgress(0);
            }
        )
    });

           <div
                className="row"
                id="file-previews"
            >
                {selectedFiles.map((f, i) => {
                    return (
                        <div className="col s12" key={i}>
                            {f.name} - {f.formattedSize}
                            <div className="progress">
                                <div className="determinate" style={{width: progress + '%'}}></div>
                            </div>
                        </div>
                    );
                })}
            </div>

Thank you for your time.