Chart.js tooltip shows only parts of items in the labels on hover

I’m trying to make a Pie Chart using chart.js and react-chartjs-2, but when it is hovered, the tooltip for ‘B Trans’ and ‘B QC’ also shows the label of ‘A Trans’ and ‘A QC’ each in the first line as you can see in the images attached. But I want the first line to be removed from the first line. Can you tell me what the problem is?
Tooltip shows the first A Trans label for A Trans data when hoveredAnd it also shows A label for B data

The codes are:

import React from 'react'
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Pie } from 'react-chartjs-2';
ChartJS.register(ArcElement, Tooltip, Legend);
const PieChart = ({rangedJobs, rangedJobB}) => {
const type = rangedJobs.map(job=>job.fields['type'][0])
const numOfTrans = type.filter(type=>type === 'TRS').length
const numOfQC = type.filter(type=>type === 'QC').length
const typeB = rangedJobB.map(job=>job.fields['type'][0])
const numOfTransB = typeB.filter(type=>type === 'TRS').length
const numOfQCB = typeB.filter(type=>type === 'QC').length
const data = {
  labels : ['A Trans', 'A QC', 'B Trans', 'B QC', ],
  datasets: [
        {
          data: [numOfTrans, numOfQC],
          backgroundColor:  ['#F38787', '#FCCACA'],
        }, 
        {
          data: [numOfTransB, numOfQCB],
          backgroundColor: ['#74ABE2', '#B2D4F5'],
        },
      ]
    }
    const options = {
      maintainAspectRatio: false,
      responsive: true,
      plugins: {
        legend: {
          display: true,
          position: 'top',
          labels: {
            generateLabels: function(chart) {
              const original = ChartJS.overrides.pie.plugins.legend.labels.generateLabels;
              const labelsOriginal = original.call(this, chart);
              let datasetColors = chart.data.datasets.map(function(e) {
                return e.backgroundColor;
              });
              datasetColors = datasetColors.flat();
              labelsOriginal.forEach(label => {
                label.datasetIndex = (label.index - label.index % 2) / 2;
                label.hidden = !chart.isDatasetVisible(label.datasetIndex);
                label.fillStyle = datasetColors[label.index];
              });
              return labelsOriginal;
            }
          },
          onClick: function(mouseEvent, legendItem, legend) {
            legend.chart.getDatasetMeta(
              legendItem.datasetIndex
            ).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
            legend.chart.update();
          }
        },
        tooltip: {
          callbacks: {
            label: function(context) {
              const labelIndex = (context.datasetIndex * 2) + context.dataIndex;
              return context.chart.data.labels[labelIndex] + ': ' + context.formattedValue;
            }
          }
        },
        title: {
          display: true,
          text: 'Compare Type Frequency',
        },
      }
    }
    return (
        <>
        <Pie width={100} height={50} options={options} data={data}/>
        </>
    )
}
export default PieChart