Why the antd upload file to Minio could not preview

Question

Today when I using this demo to upload image file to Minio :

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Button, message, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';

const props: UploadProps = {
  name: 'file',
  method: 'PUT',
  action: 'http://192.168.10.106:9000/dolphin/my-objectname?response-content-type=application%2Fjson&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=m7XQZLybylmLYTN5XoSa%2F20240328%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240328T154359Z&X-Amz-Expires=7200&X-Amz-SignedHeaders=host&X-Amz-Signature=25038a913a74dc7011cdf8133f7b17f5c95d2fbbc6f5c5c4624d428f73ee9f3a',
  headers: {
    'Content-Type': 'image/jpeg',
  },
  onChange(info) {
    
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
          <Upload {...props}>
    <Button icon={<UploadOutlined />}>Click to Upload</Button>
  </Upload>
      </header>
    </div>
  );
}

export default App;

The image upload success, but the image could not view in browser. Seems the file are broken. I could upload the image using other tool like insomnia and preview. I am sure it is not the access issue. I have tried to add the content type:

'Content-Type': 'image/jpeg',

Am I missing something? What should I do to fix this issue?