Antd tag.CheckableTag value report error

I have been developing with ant-design recently, but I have a problem when using teg.CheckableTag . I can"t find any reason

.

this is my parent component

  //MyCheckableTag 
 addCustomLabelS = (e) => {
    this.props.dispatch({type: "CHECKABLETAG_ADD", item: {num: this.state.customLabelInputValue, status: "true"}})
    this.setState({
      customLabelInputValue: ""
    })
  }
  addCustomLabelInputChange = (e) => {
    this.setState({customLabelInputValue: e.target.value});
  }


<Row gutter={50}>
  <Col span={3}> :</Col>
  <Col span={20}>
    <div style={{margin: "6px 0 10px 0"}}></div>
    <div className="customLabels">
    <Input onChange={this.addCustomLabelInputChange} value={this.state.customLabelInputValue}
                       placeholder=""/>
    <Button type="primary" onClick={this.addCustomLabelS}><Icon type="plus"/></Button>
    </div>
    <div>
       {this.props.list.CheckableTag.map((item, index) => {
           return <MyCheckableTag key={index} status={item}>{item.num}</MyCheckableTag>
       })}
    </div>
  </Col>
  <Col span={1}>
     <span className="asterisk">*</span>
   </Col>
</Row>

the subcomponent is the CheckableTag component of the official website

import React, {Component} from "react"
import {Tag} from "antd";

const {CheckableTag} = Tag;

class MyCheckableTag extends Component {
  constructor(props) {
    super(props)
    console.log(props)
    this.state = {
      checked: props.status === "true" ? true : false
    }
  }

  handleChange = (checked) => {
    this.setState({checked})
  }

  render() {
    return <CheckableTag {...this.props} checked={this.state.checked} onChange={this.handleChange}/>;
  }
}

export default MyCheckableTag

this is reducers

let list = [
  {
    num: 1,
    status: "true"
  }, {
    num: 2,
    status: "false"
  }, {
    num: 3,
    status: "true"
  }, {
    num: 4,
    status: "false"
  }, {
    num: 5,
    status: "true"
  },
]
let CheckableTag = (state = list, action) => {
  console.log(action.item)
  switch (action.type) {
    case "CHECKABLETAG_ADD": {
      return [...state, action.item]
    }
    default:
      return state
  }

}
export default CheckableTag
The

scenario is to get the value of input by typing Button in input and then pass it to redux to achieve the meaning of adding CheckableTag. This step is no problem now and has been implemented

.

but CheckableTag has a checkbox-like effect, that is, both selected and unselected data can be used in the parent component.
the selected state can be obtained through the handleChange method callback of the child component. The
selected child component can get
through this.props.children in the child component, but how can I get the
from the parent component? To the selected state of CheckableTag , neither of my parent-son communication nor redux methods will report an error

.

clipboard.png

I really can"t find a way. Please take a look at it for me. I"m in a hurry.

Mar.22,2021
Menu