How to assign different color to different line on a stacked line chart?

I have a line chart created using the dc.js library. The line chart is based on two different corssfilter groups by calling stack method. I don't want to use the default colors dc.js provides. How do I assign colors to these two lines based on the group? Here is the code for my stacked line chart class which I used for my React App.

export default class StackLineChart {
    constructor(_config) {
        this.parentElement = _config.parentElement;
        this.containerID = _config.containerID || "stack-line-chart";
        this.initVis();
    }

    initVis() {
        let vis = this;
        vis.chartContainer = vis.parentElement
                    .append("div")
                    .attr("id", this.containerID)
                    ;

        vis.chart = new dc.LineChart(`#${this.containerID}`);
        vis.chart.width(1200).height(800)
                 .yAxisLabel("Number of Conversation Finished")
             .xAxisLabel("Date")
             .curve(d3.curveCardinal)
             .margins({top: 10, left: 50, right: 10, bottom: 50});
    }

    updateVis(_config) {
        let vis = this;

        vis.chart
           .dimension(_config.dimension)
           .mouseZoomable(true)
           .brushOn(false)
           .x(d3.scaleTime().domain(_config.domain))
           .elasticY(true)
           .legend(dc.legend().x(100).y(10))
           .group(_config.group1, _config.group1_name)
           .valueAccessor(d => d.value)
           .stack(_config.group2, _config.group2_name, d => { return d.value});
        
        vis.renderVis();
    }

    renderVis() {
        let vis = this;
        vis.chart.render();
    }

    resetVis() {
        let vis = this;
        vis.chart.filterAll();
        dc.redrawAll();
    }
}

Here is the code to update the chart (i.e assigning groups and dimension)

    let dim = cf.dimension(d => d.dd_end);
    let minMax = d3.extent(this.state.data, d => d.dd_end);
    let nonUrgentGroup = dim.group().reduceSum(d => d.isNonUrgent);
    let urgentGroup = dim.group().reduceSum(d => d.isUrgent);
    console.log(nonUrgentGroup);
    this.StackLineChartVis.updateVis({
        domain: minMax,
        dimension: dim,
        group1: nonUrgentGroup, group1_name: "Non Urgent",
        group2: urgentGroup, group2_name: "Urgent",
    })

Some background for the field isNonUrgent and isUrgent in the dataset, they can be either 0 or 1.

You can set the color scheme via the color scale.

This is an ordinal scale, so e.g. I tried

.colors(d3.scaleOrdinal(d3.schemeDark2))

on the top chart of this fiddle I had open.

And sure enough, this causes the chart to use D3's dark color scheme: