How to use the d3fc.seriesSvgArea function in d3fc

// Create scale for x axis
        const xScale = scaleDiscontinuous(scaleTime())
            .domain(extentDate().accessors([(d) => d.date])(data))
            .discontinuityProvider(discontinuitySkipWeekends())
            .range([0, width]);

        // Create scale for y axis. We're only showing close, so
        // only use that extent.
        const closeExtent = extentLinear().accessors([(d) => d.close])(data);
        const yScale = scaleLinear()
            .domain(closeExtent)
            .range([height, 0])
            .nice();

        const area = seriesSvgArea()
            .crossValue((d) => d.date)
            .baseValue((_) => closeExtent[0])
            .mainValue((d) => d.close)
            .decorate((selection) => {
                selection.attr('fill', `url(#${stockCode}-minichart-gradient)`);
            });

        const line = seriesSvgLine()
            .crossValue((d) => d.date)
            .mainValue((d) => d.close);

        const point = seriesSvgPoint()
            .crossValue((d) => d.date)
            .mainValue((d) => d.close);

        const multi = seriesSvgMulti()

export function areaSeries(settings, color) {
    let series = fc.seriesSvgArea();

    series = series.decorate(selection => {
        selection.style("fill", d => color(d[0].key));
    });

    return series
        .crossValue(d => d.crossValue)
        .mainValue(d => d.mainValue)
        .baseValue(d => d.baseValue);
}

const getArea = (symbol, chartData) => {
  const closeExtent = getCloseExtent(chartData);
  return seriesSvgArea()
    .crossValue(d => d.date)
    .baseValue(_ => closeExtent[0])
    .mainValue(d => d.close)
    .decorate(selection => {
      selection.attr('fill', `url(#${symbol}-minichart-gradient)`);
    });
};