Is it possible to filter a chart by selecting a specific begin date and then an end date without one interfering with the other?

For example I'm using a barChart and I have a range like range: [01/02/2022 -> 17/02/2022] and my goal is to set a begin date and end date by selecting each one. I using crossFilter for filtering data but when I move the mouse or slide left or right both date are being set.

My JS:

  MyChart
        .width(width)
        .height(250)
        .margins({ top: 10, right: 20, bottom: 25, left: 70 })
        .dimension(moveMonths)
        .mouseZoomable(true)
        .transitionDuration(1)
        .x(d3.time.scale().domain([d3.min(data, function (d) {
            return d.dd;
        }), d3.max(data, function (d) {
            return d.dd;
        })]))
        .round(d3.time.month.round)
        .xUnits(d3.time.months)
        .title(function (p) {
            return p.key.getDate() + '/' + (p.key.getMonth() + 1) + '/' + p.key.getFullYear() + ' Total ' + formatDecimal(p.value, 2, ',', '.') + " €";
        })
        .elasticY(true)
        .renderHorizontalGridLines(true)
        .brushOn(false)
        .compose([
            dc.lineChart(DeptVariationChart)
                .group(moveMonthsGroup)
                .valueAccessor(function (d) {
                    return d.value;
                })
        ])
        .renderHorizontalGridLines(true)
        .yAxis().tickFormat(function (v) { return formatDecimal(v, 0, ',', '.') + " €"; });