reactjs - ReactJS で複数のキャンバスを処理する方法

Question

クラスの状態で配列に格納している1つのページに2つのキャンバスを表示したい。基本コード-

constructor(props) {
    super(props);
    this.myRef = React.createRef();
    this.myRef1 = React.createRef();
    this.state = {
        isDrawing: false,
        startX: 0,
        startY: 0,
        boards: [<canvas className="wb-canvas" ref={this.myRef} width={800} height={400} id={1} />, <canvas className="wb-canvas" ref={this.myRef1} width={800} height={400} id={2} />],
    };
}

クリックすると2つのボードを切り替えるスイッチボタンがあります。switch()関数-

switch() {
    let a = this.state.boards[0];
    let b = this.state.boards[1];
    this.setState({
        boards: [b, a],
    });
    console.log(this.state.boards);
}

キャンバスの上に木を描き、下に花を描いたとします。スイッチをクリックすると、2 つのキャンバス要素が正常に切り替わりますが (開発者ツールで表示されます)、ツリーは依然として上部に表示され、花は下部に表示されます。つまり、Web ページでキャンバスが切り替わっていないように見えます。

ctx.save()キャンバスに andを使用してみctx.restore()ましたが、それもうまくいかないようです。

なぜこれが起こっているのか混乱していますか？ここで何が間違っていますか？