How to use the d3-shape.area function in d3-shape

private createAreaPath(attributes: any) {
    return d3Area()
      .x0(attributes.x0 || attributes.x)
      .x1(attributes.x1 || attributes.x)
      .y0(attributes.y0 || attributes.y)
      .y1(attributes.y1 || attributes.y)
      .curve(this.interpolate())
      .defined(this.isDefined.bind(this));
  }

const line = d3_line()
        .defined(d => d.value)
        .x(d => x(d.date))
        .y(d => (isY2Axis ? y2(d.value) : y(d.value)));
      const type = typeof style !== 'undefined' ? style.type : lineData.type;
      const lineStyle = typeof style !== 'undefined' ? style.style : lineData.style;
      let area = null;
      let pathContainers = null;

      if (highlightYear) {
        this.highlightYear(d3Container, x);
      }

      switch (type) {
        case 'area':
          area = d3_area()
            .defined(d => d.value)
            .x(d => x(d.date))
            .y(chartHeight)
            .y1(d => y(d.value));

          d3Container
            .append('path')
            .datum(lineValuesWithFormat)
            .attr('data-test', `${testId}-area`)
            .attr('class', lineStyle)
            .attr('d', area);

          d3Container
            .append('path')
            .datum(lineValuesWithFormat)
            .attr('data-test', `${testId}-area-line`)

function createGenerator(props, generator?: Area): Area {
    generator = generator || d3.area();
    return args.reduce((acc: Area, arg) => {
        const prop = props[arg];
        if (prop) {
            return acc[arg](prop);
        }
        return acc;
    }, generator);
}

data,
  curve,
  defined,
  x,
  x0,
  x1,
  y0,
  y1,
  glyph,
  reverse = false,
  ...restProps
}) {
  const stack = d3stack();
  if (keys) stack.keys(keys);

  const path = area();
  if (x) path.x(x);
  if (x0) path.x0(x0);
  if (x1) path.x1(x1);
  if (y0) path.y0(y0);
  if (y1) path.y1(y1);
  if (curve) path.curve(curve);
  if (defined) path.defined(defined);

  const seriesData = stack(data);
  if (reverse) seriesData.reverse();

  return (

return useMemo(() => {
        return area()
            .defined(d => d.x !== null && d.y !== null)
            .x(d => d.x)
            .y1(d => d.y)
            .curve(curveFromProp(curve))
            .y0(yScale(areaBaselineValue))
    }, [curve, yScale, areaBaselineValue])
}

private yClipPath(barWidth: number, offset: number) {
    return d3Area()
      .x0(this.xScale.range()[1])
      .x1(this.x1 as any)
      .y((d: Datum) => (this.y0(d) || this.yScale.range()[0] + barWidth) - offset)
      .curve(curveStepAfter)
  }
}

const areas = series.map((serie, index) => {
            const path = shape.area()
                .x((d, index) => x(xAccessor({ item: d.data, index })))
                .y0(d => y(d[ 0 ]))
                .y1(d => y(d[ 1 ]))
                .curve(curve)
                (data.map((_, index) => serie[ index ]))

            return {
                path,
                key: keys[ index ],
                color: colors[ index ],
            }
        })

let currentArea;
    let startingArea;

    const xProperty = d => {
      const label = d.name;
      return this.xScale(label);
    };

    if (this.stacked || this.normalized) {
      currentArea = area()
        .x(xProperty)
        .y0((d, i) => this.yScale(d.d0))
        .y1((d, i) => this.yScale(d.d1));

      startingArea = area()
        .x(xProperty)
        .y0(d => this.yScale.range()[0])
        .y1(d => this.yScale.range()[0]);
    } else {
      currentArea = area()
        .x(xProperty)
        .y0(() => (this.baseValue === 'auto' ? this.yScale.range()[0] : this.yScale(this.baseValue)))
        .y1(d => this.yScale(d.value));

      startingArea = area()
        .x(xProperty)
        .y0(d => (this.baseValue === 'auto' ? this.yScale.range()[0] : this.yScale(this.baseValue)))
        .y1(d => (this.baseValue === 'auto' ? this.yScale.range()[0] : this.yScale(this.baseValue)));
    }

    currentArea.curve(this.curve);