Storage.put() returns bad request error (status code 400) in React + AWS Amplify app

Code:

import { API, Storage } from "aws-amplify"
import { FilePond, registerPlugin } from "react-filepond"
...
const [newMedia, setNewMedia] = useState()
...
const mediaUpload = () => {
  Storage.put(newMedia[0].file, "test.png")
   .then((res) => console.log(res, "Upload result"))
   .catch((err) => console.error(err, "Error log"))
}
...
<FilePond
  allowMultiple={false}
  allowFileRename={true}
  fileRenameFunction={(file) => uuid() + file.extension}
  onupdatefiles={(file) => setNewMedia(file)}
  labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
/>

<Button color="primary" onClick={() => mediaUpload()}>
  Upload
</Button>

I've tried as described on this Amplify doc.

But now I'm getting such error.

I don't know why this error occurs even though I followed the official documentation. I think there is an issue with my S3 bucket policy, but I couldn't find the correct solution.

I didn't use the existing S3 bucket and initialized it on my project from scratch using Amplify CLI.

I could avoid this error using react-s3 node module. But at only uploading. Function to delete object on the bucket is not working at the moment.

Currently, my bucket's policy is set as react-s3 defined.

Please tell me what I should try to make the standard function works well.