Dc bar charts click function does not work on custom crossfilter dimensions

Question

So, in my dataset I have one integer age variable. I am creating a custom crossfilter dimension and group of that variable as I need age ranges.

const ageRangeDim = ndx.dimension(function(d) {
            
              if (parseFloat(d.age) <= 7) 
            return "0-7";
            else if (parseFloat(d.age) <= 18) 
            return "8-18";
            else if (parseFloat(d.age) <= 25)
            return "19-25";
            else if (parseFloat(d.age) <= 40) 
            return "26-40";
            else if (parseFloat(d.age) <= 50)
            return "41-50";
            else if (parseFloat(d.age) <= 65) 
            return "51-65";
            else if (parseFloat(d.age) <= 80)
            return "66-80";
            else if (parseFloat(d.age) <= 90) 
            return "81-90";
            else if (parseFloat(d.age)  <= 100)
            return "91-100";
              
            return 0;
              });

const ageRangeGroup = ageRangeDim.group().reduceCount()

Then I create bar chart out of it,

const ageGroupChart = (barChart("#App") as any)
        .x (scaleBand())
        .xUnits(units.ordinal)
          .xAxisLabel("Age groups")
          .yAxisLabel("Number of people")
        .dimension(ageRangeDim)
          .brushOn(false)
        .group(ageRangeGroup)

It displays fine. But now I am not able to filter any further charts. So, if I click on any bar in the chart, it does not change other charts.

I dont know how can I circumvent this. I know that crossfilter filters the actual data directly and then display corresponding changes on different chart. However, in this case I am creating my own custom range group, which is not available in the actual dataset