How can I click button then add a dynamic Draggable component in the html?

Start in CanvasContainer.renderCharts and trace how the charts collection is updated when a button adds a chart. Inspect the Draggable usage, especially defaultPosition and position, along with the x and y values read from each chart. Done means newly added draggable charts render at the intended initial position and retain their positions while dragging.

I set a name is 'charts' array ，when I click the button then charts will push a Draggable component，but the position={x:0,y:0} is not work ,How can I fix it？

@withRouter
@connect(
  ({ canvasReducer }) => ({ canvasReducer }),
  {
    setChart: canvasAction.setChart,
    setCanvas: canvasAction.setCanvas
  }
)
class CanvasContainer extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      activeDrags: 0,
      marks: {
        10: "10",
        50: "50",
        100: "100"
      }
    };
  }
  componentDidMount() {}
  renderCharts = () => {
    const dragHandlers = { onStart: this.onStart, onStop: this.onStop };
    const charts = this.props.canvasReducer.get("charts");

    const canvas = this.props.canvasReducer.get("canvas");
    const scale = canvas.get("scale");

    if (charts.size <= 0) {
      return null;
    }
    return charts.map((chart, index) => {
      let option;
      if (chart.get("type") === "bar") {
        option = BarOption;
      } else if (chart.get("type") === "line") {
        option = LineOption;
      } else if (chart.get("type") === "pie") {
        option = PieOption;
      }
      let component = <ReactEcharts option={option} key={index} notMerge={true} lazyUpdate={true} style={{ width: '"100%"', height: "100%" }} />;
      return (
        <div style={{ position: "static" }}>
          <Draggable
            key={index}
            bounds=".rnd-content"
            defaultPosition={{ x: 0, y: 0 }}
            // defaultPosition={{ x: chart.get("x"), y: chart.get("y") }}
            position={{ x: chart.get("x"), y: chart.get("y") }}
            scale={scale}
            // onStart={this.handleStart}
            // onDrag={this.handleDrag}
            // onStop={this.handleStop}
            onDrag={(e, position) => {
              this.props.setChart(
                charts.map((item, ii) => {
                  if (index == ii) {
                    return item.merge({
                      x: position.x,
                      y: position.y
                    });
                  }
                  return item;
                })
              );
            }}
          >
            <div style={{ width: chart.get("width"), height: chart.get("height"), background: "#fff" }}>
              <Icon type="close-circle" className="icon-del" onClick={this.delChart.bind(this, index)} />
              {component}
            </div>
          </Draggable>
        </div>
      );
    });
  };
  delChart = _index => {
    const charts = this.props.canvasReducer.get("charts");
    this.props.setChart(charts.filter((item, index) => index != _index));
  };
  sliderChanged = value => {
    this.props.setCanvas(
      Map({
        scale: value / 100
      })
    );
  };
  render() {
    const canvas = this.props.canvasReducer.get("canvas");
    const scale = canvas.get("scale");

    return (
      <div className="canvas-container">
        <div className="canvas-center">
          <div
            className="rnd-content"
            style={{
              transformOrigin: "0 0",
              transform: `scale(${scale})`
            }}
          >
            {this.renderCharts()}
          </div>
        </div>
        <div className="slider-wrapper">
          <div className="slider-content">
            <span className="title">面布缩放百分比</span>
            <Slider
              marks={this.state.marks}
              defaultValue={scale * 100}
              step={5}
              min={10}
              max={100}
              className="slider"
              onAfterChange={value => {
                this.sliderChanged(value);
              }}
            />
          </div>
        </div>
      </div>
    );
  }
}

export default CanvasContainer;