无法setState对象数组- Typescript

interface MyState {
  data: MyData[];
}

interface MyData {
  id: number;
  name: string;
}

class MyComponent extends React.Component<{}, MyState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      data: [
        { id: 1, name: "A" },
        { id: 2, name: "B" },
      ],
    };
  }

  updateData() {
    const { data } = this.state;
    // 修改 data 数组
    const newData: MyData[] = data.map((item) => {
      if (item.id === 2) {
        return { ...item, name: "C" };
      }
      return item;
    });

    // 更新整个状态对象
    this.setState({
      data: newData,
    });
  }

  render() {
    return (
      <div>
        <button onClick={() => this.updateData()}>更新数据</button>
      </div>
    );
  }
}