使用多个数据集重新绘制ComposedChart？

import React, { Component } from 'react';
import { ComposedChart, Line, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

class MyChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { name: 'A', value1: 10, value2: 20 },
        { name: 'B', value1: 15, value2: 25 },
        { name: 'C', value1: 20, value2: 30 },
      ],
    };
  }

  handleDataUpdate = () => {
    // 更新数据集
    const newData = [
      { name: 'A', value1: 12, value2: 22 },
      { name: 'B', value1: 18, value2: 28 },
      { name: 'C', value1: 25, value2: 35 },
    ];
    this.setState({ data: newData });
  };

  render() {
    const { data } = this.state;

    return (
      <div>
        <button onClick={this.handleDataUpdate}>更新数据</button>
        <ComposedChart width={500} height={300} data={data}>
          <XAxis dataKey="name" />
          <YAxis />
          <CartesianGrid strokeDasharray="3 3" />
          <Tooltip />
          <Legend />
          <Bar dataKey="value1" fill="#8884d8" />
          <Line type="monotone" dataKey="value2" stroke="#82ca9d" />
        </ComposedChart>
      </div>
    );
  }
}

export default MyChart;