The new pie chart cannot same as previous of pie chart

Question

Why the new pie chart cannot same as previous of pie chart of animation and output numbers when onclick event "showHRDCorpPieChart()" the card body? The new pie chart cannot display the number of each data in the pie chart but the previous one can show the number in each of pie chart.

Previous pie chart (No yet click for new chart): Previous pie chart (No yet click for new chart) and got number in the chart

New pie chart (Clicked for new chart): Doesn't show number in the chart

My Code at below:
Version 3 Chart of library:

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

<div class="col" style="cursor: pointer;" onclick="showHRDCorpTable(); showHRDCorpPieChart()">
  <div class=" card info-card sales-card2 card-column">
    <div class="card-body">
      <h5 class="card-title">Total HRD Corp</h5>
      <div class="align-items-center margin-together">
        <div class="card-icon rounded-circle align-items-center justify-content-center">
          <i><img src="img/emp/HRDCorp.png" style="width: 45px; height: 45px; margin-left: 3px;"></i>
        </div>
        <div class="ps-3">
          <h6><?php echo $totalHRDCorp; ?> License</h6>
        </div>
      </div>
    </div>
  </div>
</div>

Canvas:

<div class="card">
  <canvas id="AdminProjectChart" style="width:100%; max-width:500px; margin-left:auto; margin-right:auto;"></canvas>
</div>

Previous pie chart (No yet click for new chart):

var company1Values = ["HRD Corp", "ARA TechBis", "ASEA ACE", "IHT", "IHT - JB"];
var company2Values = [<?php echo $totalHRDCorp ?>, <?php echo $totalARATechBis ?>, <?php echo $totalASEAACE ?>, <?php echo $totalIntegraHealthcareTechnology; ?>, <?php echo $totalIHT_JB; ?>];

var ctx2 = document.getElementById("AdminProjectChart").getContext('2d');

const totalARATechBis = ctx2.createLinearGradient(0, 0, 0, 350);
const totalASEAACE = ctx2.createLinearGradient(0, 0, 0, 350);
const totalIHT = ctx2.createLinearGradient(0, 0, 0, 350);
totalARATechBis.addColorStop(0, 'rgb(21, 13, 107)');
totalARATechBis.addColorStop(1, 'rgb(188, 16, 80)');
totalASEAACE.addColorStop(0, '#f9484a');
totalASEAACE.addColorStop(1, '#fbd72b');
totalIHT.addColorStop(0, '#80FF72');
totalIHT.addColorStop(1, '#7EE8FA');

var barColors = ["#29B3FF", totalARATechBis, totalASEAACE, totalIHT, "#ED2939"];
var hoverBackgroundColor = ["#29B3FF", totalARATechBis, totalASEAACE, totalIHT, "#ED2939"];

const chartDataLabelsPlugin = ChartDataLabels;

const testingDestroy = new Chart(ctx2, {
  type: "pie",
  data: {
    labels: company1Values,
    datasets: [{
      backgroundColor: barColors,
      data: company2Values,
      hoverBackgroundColor: hoverBackgroundColor
    }]
  },
  plugins: [chartDataLabelsPlugin],
  options: {
    responsive: true,
    plugins: {
      datalabels: {
        align: 'center',
        color: "white",
        font: {
          weight: "bold"
        },
        formatter: (value, context) => {
          const datapoints = context.chart.data.datasets[0].data;
          
          function totalSum(total, datapoint) {
            return total + datapoint;
          }
          const totalValue = datapoints.reduce(totalSum, 0);
          const percentageValue = (value / totalValue * 100).toFixed(1);
          const display = [`${percentageValue}%`];
          
          return display;
        }
      },
      
      legend: {
        position: "bottom"
      },
      
      title: {
        display: true,
        text: "Total Percentage Of Users For Each Company"
      }
    }
  }
});

New pie chart (Clicked for new chart): I use the destroy method to destroy the previous pie chart and display this new pie chart

function showHRDCorpPieChart() {
  var company3Values = ["Ace - Block Chain", "Ace HRMS", "Ace - Big Data"];
  var company4Values = [57, 66, 44];

  testingDestroy.destroy();

  var HRDCorpPieChart = document.getElementById("AdminProjectChart").getContext('2d');

  new Chart(HRDCorpPieChart, {
    type: "pie",
    data: {
      labels: company3Values,
      datasets: [{
        backgroundColor: ['red', 'purple', 'yellow'],
        data: company4Values,
        hoverBackgroundColor: ['yellow', 'purple', 'yellow']
      }]
    },
    options: {
      plugins: [chartDataLabelsPlugin],
      responsive: true,
      plugins: {
        datalabels: {
          align: 'center',
          color: "white",
          font: {
            weight: "bold"
          }
          [chartDataLabelsPlugin]
        },

        legend: {
          position: "bottom"
        },

        title: {
          display: true,
          text: "Toasdasdasdasdyasdasdasdasdasdasdasdasdasd"
        }
      }
    }
  });
}

Curious: Is it possible that "plugins: [chartDataLabelsPlugin]" cannot use in multiple of pie chart? But how to use multiple of "plugins: [chartDataLabelsPlugin]" in different pie chart?

I want the new chart can display number of value in the pie chart base on this example images: Result: