onFileRemove does not receive updated key from processFile in StorageManager

[aljasser]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have tried disabling all browser extensions or using a different browser
• [X] I have tried deleting the node_modules folder and reinstalling my dependencies
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Storage (Storage Manager)

How is your app built?

Create React App

What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge, Safari

Which region are you seeing the problem in?

No response

Please describe your bug.

When using the processFile function to generate a new key for files, the onFileRemove callback does not receive the updated key. However, other callbacks (onUploadStart, onUploadSuccess, onUploadError) do receive the updated key correctly.

What's the expected behaviour?

The onFileRemove callback should receive the updated key returned by processFile, just like the other callbacks.

Help us reproduce the bug!

Include StorageManager Implement processFile to generate a new unique key for each file Observe that onFileRemove receives the original key while other callbacks receive the updated key

Code Snippet

import React from 'react';
import { StorageManager } from "@aws-amplify/ui-react-storage";
import { v4 as uuidv4 } from 'uuid';

const ImageUploader = () => {

  const processFile = ({ file, key }) => {
    const fileExtension = file.name.split('.').pop();
    const new_key = `${uuidv4()}.${fileExtension}`;
    return { file, key: new_key };
  };

  const handleFileRemove = ({ key }) => {
    console.log("from onFileRemove, key:", key);
  };

  const handleUploadSuccess = ({ key }) => {
    console.log("from onUploadSuccess, key:", key);
  };

  const handleUploadStart = ({ key }) => {
    console.log("from onUploadStart, key:", key);
  };

  const handleUploadError = ({ key }) => {
    console.log("from onUploadError, key:", key);
  };

  return (
    <StorageManager
      acceptedFileTypes={["image/*"]}
      accessLevel="public"
      maxFileCount={10}
      onFileRemove={handleFileRemove}
      onUploadError={(error, { key }) => handleUploadError({ key })}
      onUploadSuccess={handleUploadSuccess}
      onUploadStart={handleUploadStart}
      processFile={processFile}
    />
  );
};

export default ImageUploader;

Console log output

from processFile old key: img.png from processFile new key: 05cfce97-8dea-4f23-a750-765d1328bffd.png from onUploadStart, key: 05cfce97-8dea-4f23-a750-765d1328bffd.png from onUploadSuccess, key: 05cfce97-8dea-4f23-a750-765d1328bffd.png from onFileRemove, key: img.png

Additional information and screenshots

Amplify Version: "@aws-amplify/ui-react": "^6.1.4", "@aws-amplify/ui-react-storage": "^3.1.3",