Why isn't the legend changing after I have changed the data?

Question

I have made a Drill down bar chart using help of yt videos and forums utilising. However, I have noticed that when you change into a different data set. The legend doesnt really change.

Please see the example below with the code so you can make sense of it.

Is there a way to do it so it changes?

Screenshots: As you can see the legend, shows exactly that it needs to show. and it matches the bars.

Now I have clicked on the first bar, its showing Types of revision which isn't the right label. should be o1 - as on the hover.

I am really struggling to do this, any help will be hugely appreciated.

CODE:

 <div class="chart3">
        <button onclick="resetChart()">Reset</button>
        <canvas id="barChart"></canvas>
      </div>

// TESTING,
const browserData = [
  {
    browser: "Engineering Flow Diagrams",
    color: "rgba(75, 192, 192, 1)",
    users: 150,
    total_document: 499,
    versionData: [
      { version: "v5", users: 10 },
      { version: "v6", users: 20 },
      { version: "v7", users: 30 },
      { version: "v8", users: 60 },
      { version: "v9", users: 20 },
    ],
  },
  {
    browser: "Process Flow Diagrams",
    color: "rgba(255, 26, 104, 1)",
    users: 25,
    total_document: 191,
    versionData: [
      { version: "V3.1", users: 10 },
      { version: "v3.2", users: 10 },
      { version: "v3.3", users: 5 },
    ],
  },
  {
    browser: "Site Plans/Layouts/Plot Plans",
    color: "rgba(54, 162, 235, 1)",
    users: 30,
    total_document: 29,
    versionData: [
      { version: "Web 9", users: 10 },
      { version: "Web 10", users: 10 },
      { version: "Web 11", users: 10 },
    ],
  },
];

const data = {
  datasets: [
    {
      label: "Total Documents",
      data: browserData,
      backgroundColor: [
        browserData[0].color,
        browserData[1].color,
        browserData[2].color,
      ],
      borderColor: [
        browserData[0].color,
        browserData[1].color,
        browserData[2].color,
      ],
      borderWidth: 1,
    },
  ],
};

// config
const config = {
  type: "bar",
  data,
  options: {
    onHover: (event, chartElement) => {
      if (myChart.config.data.datasets[0].label === "Total Documents") {
        event.native.target.style.cursor = chartElement[0]
          ? "pointer"
          : "default";
      } else {
        event.native.target.style.cursor = "default";
      }
    },
    parsing: {
      xAxisKey: "browser",
      yAxisKey: "total_document",
    },
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  },
};

// render init block
const ctx = document.getElementById("barChart");
const myChart = new Chart(ctx, config);

function changeChart(browser) {
  myChart.config.options.parsing.xAxisKey = "versionData.version";
  myChart.config.options.parsing.yAxisKey = "versionData.users";

  const vColor = [];
  const vUsers = [];
  const vLabels = browserData[browser].versionData.map((labels) => {
    vColor.push(browserData[browser].color);
    vUsers.push(labels.users);
    return labels.version;
  });
  console.log(vLabels);
  myChart.config.data.datasets[0].data = vUsers;
  myChart.config.data.labels = vLabels;
  myChart.config.data.datasets[0].backgroundColor = vColor;
  myChart.config.data.datasets[0].borderColor = vColor;
  myChart.config.data.datasets[0].label = browserData[browser].browser;
  myChart.update();
}

function clickHandler(click) {
  if (myChart.config.data.datasets[0].label === "Total Documents") {
    const bar = myChart.getElementsAtEventForMode(
      click,
      "nearest",
      {
        intersect: true,
      },
      true
    );
    if (bar.length) {
      changeChart(bar[0].index);
    }
  }
}

ctx.onclick = clickHandler;