D3.js coloring curved stacked area graph wrong

Question

I am trying to create a stacked area graph with D3.js and but it colors the graph wrong:

The marked red and gold areas should be colored in purple like in this next picture:

Is is with identical data but from another library. The gold and red coloring has value 0 in May and June.

This is how I draw and color my Graph:

const stackedData = d3.stack()
        .keys(keys)(data.data);

const color = d3.scaleOrdinal()
        .domain(keys)
        .range(data.lineColors);

const area = d3.area()
        .x((d: any) => {
            return x(new Date(d.data['period']))!;
        })
        .y0((d: any) => y(d[0])!)
        .y1((d: any) => y(d[1])!)
        .curve(d3.curveNatural);
svg.selectAll('#chart')
        .data(stackedData)
        .enter()
        .append('path')
        .attr('d', (d: any) => area(d))
        .style('fill', (d: any) => {
            return color(d.key) as string;
        });