componentをtoggleで制御するたびにchart.jsのオブジェクトを作成させない方法はあるのか？

環境

React.jsの検証なのでブラウザ側 (2020/4/15 chrome 80.0.3987.163)

chart.js: 2.9.3
react: 16.13.1

動作

下記の様にtoggle buttonの制御で表示されるcomponentが変わる。

問題点

・component切替えの度にchartオブジェクトを作成しているが、一回作成されたら後はそれをそのまま使う。というようなことはできないのか？
(現状componentDidUpdate()でcomponentが切り替わるごとにchartオブジェクトを作成するようにしています。これも他に良い方法は無いのかと思っております)

自分で考えてみたこと

singletonパターンっぽいがchartオブジェクト自体はこの場合は４つできるのであてはまらない？

コード

少々長いですがポイントは componentDidMount(), componentDidUpdate()あたりになるかと思われます。
よろしくお願いいたします。

import React from 'react';
import Chart from 'chart.js';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isShowGraph: true
    }

    this.chart1 = React.createRef();
    this.chart2 = React.createRef();
    this.chart3 = React.createRef();
    this.chart4 = React.createRef();
  }

  componentDidMount() {
    this.createCharts();
  }

  componentDidUpdate() {
    if(this.state.isShowGraph) this.createCharts();
  }

  createCharts = () => {
    const chart1 = this.chart1.current.getContext("2d");
    const chart2 = this.chart2.current.getContext("2d");
    const chart3 = this.chart3.current.getContext("2d");
    const chart4 = this.chart4.current.getContext("2d");

    new Chart(chart1, {
      type: 'bar',
      data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
              label: 'first',
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          },
          responsive: false
      }
    });

    new Chart(chart2, {
      type: 'line',
      data: {
        labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
        datasets: [{ 
            data: [86,114,106,106,107,111,133,221,783,2478],
            label: "Africa",
            borderColor: "#3e95cd",
            fill: false
          }, { 
            data: [282,350,411,502,635,809,947,1402,3700,5267],
            label: "Asia",
            borderColor: "#8e5ea2",
            fill: false
          }, { 
            data: [168,170,178,190,203,276,408,547,675,734],
            label: "Europe",
            borderColor: "#3cba9f",
            fill: false
          }, { 
            data: [40,20,10,16,24,38,74,167,508,784],
            label: "Latin America",
            borderColor: "#e8c3b9",
            fill: false
          }, { 
            data: [6,3,2,2,7,26,82,172,312,433],
            label: "North America",
            borderColor: "#c45850",
            fill: false
          }
        ]
      },
      options: {
        title: {
          display: true,
          text: 'World population per region (in millions)'
        },
        responsive: false
      }
    });

    new Chart(chart3, {
      type: 'pie',
      data: {
        labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
        datasets: [{
          label: "Population (millions)",
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
          data: [2478,5267,734,784,433]
        }]
      },
      options: {
        title: {
          display: true,
          text: 'Predicted world population (millions) in 2050'
        },
        responsive: false
      }
    });

    new Chart(chart4, {
      type: 'radar',
      data: {
        labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
        datasets: [
          {
            label: "1950",
            fill: true,
            backgroundColor: "rgba(179,181,198,0.2)",
            borderColor: "rgba(179,181,198,1)",
            pointBorderColor: "#fff",
            pointBackgroundColor: "rgba(179,181,198,1)",
            data: [8.77,55.61,21.69,6.62,6.82]
          }, {
            label: "2050",
            fill: true,
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            pointBorderColor: "#fff",
            pointBackgroundColor: "rgba(255,99,132,1)",
            data: [25.48,54.16,7.61,8.06,4.45]
          }
        ]
      },
      options: {
        title: {
          display: true,
          text: 'Distribution in % of world population'
        },
        responsive: false
      },
    });
  }

  handleToggleDisplay = (isShowGraph) => {
    this.setState({isShowGraph: !isShowGraph});
  }

  render() {
    return (
      <React.Fragment>
        <button onClick={() => this.handleToggleDisplay(this.state.isShowGraph)}>change mode</button>

        {
          this.state.isShowGraph 
          ?
            <div className="chart-box">
              <div className="chart1">
              <canvas 
                ref={this.chart1} 
                width="300" 
                height="300"
              />
              </div>
      
              <div className="chart2">
              <canvas 
                ref={this.chart2} 
                width="300" 
                height="300"
              />
              </div>
      
              <div className="chart3">
              <canvas 
                ref={this.chart3} 
                width="300" 
                height="300"
              />
              </div>
      
              <div className="chart4">
              <canvas 
                ref={this.chart4} 
                width="300" 
                height="300"
              />
              </div>
            </div>
          :
          "not show"
        }

      </React.Fragment>
    );
  }
}

export default App;