Custom visual - Grouped bar chart not working

Thanks for the solution v-viig. The solution was

1. To create an interface like this

export interface DataValue {
value: number;
rate: string;
}

2. Then edit the bar chart code to this

const slice: d3.Selection<Data> = svg.selectAll(".slice")
.data(data)
.enter().append("g")
.attr("class", "g")
.attr("transform", function (d) { return "translate(" + x0(d.categorie) + ",0)"; });

slice.selectAll("rect")
.data<DataValue>((d) => { return d.values; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function (d) { return x1(d.rate).toString(); })
.style("fill", function (d) { return color(d.rate).toString() })
.attr("y", function (d) { return +y(d.value); })
.attr("height", function (d) { return height - (+y(d.value)); });

I'm not sure why simple D3 code cannot work here. why it has to be so hard?