[antd] how is the returned result of Upload bound to List Item?

problem description

I use List in combination with Upload to control the display of List"s Avatar according to the Upload result. Now I have a problem. Any Upload will update all Avatar status. Can anyone take a look?

the environmental background of the problems and what methods you have tried

now I don"t know how to bind List.Item.Id to Upload

related codes

/ / Please paste the code text below (do not replace the code with pictures)
https://codesandbox.io/s/o94m.

import React, { Component } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Upload, message, Button, Icon, Avatar, List } from "antd";

const data = [
  "Racing car sprays burning fuel into crowd.",
  "Japanese princess to wed commoner.",
  "Australian walks 100km after outback crash.",
  "Man charged over missing wedding girl.",
  "Los Angeles battles huge wildfires."
];

class CustomUpload extends Component {
  constructor(props) {
    super(props);
    this.handleUploadStatus = this.handleUploadStatus.bind(this);
    this.state = { avatar_bg_c: "gray", avatar_icon: "question" };
    this.uploaderProps = {
      name: "file",
      action: "//jsonplaceholder.typicode.com/posts/",
      headers: {
        authorization: "authorization-text"
      },
      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`);
          this.handleUploadStatus(info.file.status);
        } else if (info.file.status === "error") {
          message.error(`${info.file.name} file upload failed.`);
          this.handleUploadStatus(info.file.status);
        }
      }
    };
  }

  handleUploadStatus(uploadStatus) {
    switch (uploadStatus) {
      case "done":
        this.setState({ avatar_bg_c: "green", avatar_icon: "check" });
        break;
      case "error":
        this.setState({ avatar_bg_c: "red", avatar_icon: "close" });
        break;
      default:
        this.setState({ avatar_bg_c: "yellow", avatar_icon: "question" });
    }
  }

  render() {
    const { avatar_bg_c, avatar_icon } = this.state;
    return (
      <div>
        <h3 style={{ marginBottom: 16 }}>Default Size</h3>
        <div>
          :{avatar_bg_c}, {avatar_icon}
        </div>
        <List
          header={<div>Header</div>}
          footer={<div>Footer</div>}
          bordered
          dataSource={data}
          renderItem={item => (
            <List.Item
              actions={[
                <Upload {...this.uploaderProps}>
                  <Button>
                    <Icon type="upload" /> Upload
                  </Button>
                </Upload>
              ]}
            >
              <List.Item.Meta
                avatar={
                  <Avatar
                    shape="circle"
                    style={{ backgroundColor: avatar_bg_c }}
                    icon={avatar_icon}
                  />
                }
                title={avatar_bg_c}
                description={avatar_icon}
              />
              <div>
                {avatar_bg_c}, {avatar_icon}
              </div>
              {/* {item} */}
            </List.Item>
          )}
        />
      </div>
    );
  }
}

// ReactDOM.render(<CustomUpload />, document.getElementById("container"));
export default CustomUpload;

what result do you expect? What is the error message actually seen?

I want each Upload to update only the corresponding Item status