How can I solve the console error for dc.js OnClick functions?

Question

I'm currently using d3.js version 7.4.4 and dc.js version 4.0.0. Here's the code for making a bar chart and 2 pie charts using the same data:

dataCount = dc.dataCount('#data-count');

var CountryChart= new dc.PieChart('#Country');
var WaterTypeChart = new dc.PieChart("#WaterType");
var yearChart = new dc.BarChart("#Year")


d3.csv("file.csv").then(function(data) {

  var ndx =crossfilter(data);
  var all= ndx.groupAll();
  var yearDim= ndx.dimension(function(d){ return d["Year"]});
  var CountryDim= ndx.dimension(function(d){ return d["Country"]});
  var JournalDim= ndx.dimension(function(d){ return d["Journal"]});
  var WaterTypeDim= ndx.dimension(function(d){ return d["WaterType"]});


  var CountryGroup = CountryDim.group();
  var WaterTypeGroup = WaterTypeDim.group();
  var yearGroup= yearDim.group();
  
  CountryChart
    .width(220)
    .height(200)
    .slicesCap(20)
    .innerRadius(20)
    .dimension(CountryDim)
    .group(CountryGroup)
    .transitionDuration(500);

   
  
  WaterTypeChart
    .width(220)
    .height(200)
    .ordinalColors(['#0096FF', '#40E0D0', '#228B22'])
    .slicesCap(4)
    .innerRadius(10)
    .dimension(WaterTypeDim)
    .group(WaterTypeGroup);

  yearChart
    .width(550)
    .height(350)
    .dimension(yearDim)
    .group(yearGroup)
    .x(d3.scaleBand()) //d3.scale.ordinal().domain(genusDim) //d3.scaleBand() for d3 v4
    .xUnits(dc.units.ordinal)
    .elasticX(true)
    .elasticY(true)
    .brushOn(false)
    .centerBar(true)
      // .xAxisLabel('Injury Cause')
    .yAxisLabel('Count');

dataCount
   .crossfilter(ndx)
   .groupAll(all);


  d3.selectAll('#all').on('click', function() {
      dc.filterAll();
      dc.renderAll();
  });

  d3.selectAll('#Year').on('click', function() {
      yearChart.filterAll();
      dc.redrawAll();
  });

  d3.selectAll('#Country').on('click', function() {
      CountryChart.filterAll();
      dc.redrawAll();
  });

  d3.selectAll('#WaterType').on('click', function() {
      WaterTypeChart.filterAll();
      dc.redrawAll();
  });



  dc.renderAll();

});

The console on clicking on the pie chart gives me the following error:

cap-mixin.js:187 Uncaught TypeError: Cannot read properties of undefined (reading 'others')
    at PieChart.onClick (cap-mixin.js:187:15)
    at PieChart._onClick (pie-chart.js:456:18)
    at SVGPathElement.<anonymous> (pie-chart.js:163:41)
    at SVGPathElement.<anonymous> (d3.js:2248:14)

For bar charts:

Uncaught TypeError: Cannot read properties of undefined (reading 'key')
    at utils.js:30:39
    at BarChart.onClick (base-mixin.js:1059:42)
    at BarChart.onClick (bar-chart.js:272:15)
    at SVGRectElement.<anonymous> (bar-chart.js:191:51)
    at SVGRectElement.<anonymous> (d3.js:2248:14)

I'm not sure if I used a function that's no longer supported in the libraries or something else. Any help would be appreciated.