График nivo + d3 с typescript

Есть график с nivo, нужно добавить TS - проблема в функции для создания своего слоя createAreaLayer. В коде пометила !!!, где появляются ошибки

`

  const createAreaLayer = (shift: number, opacity: number, factor: 
number) => {
return ({ series, xScale, yScale }: any) => {
  const areaGenerator = area()
    .x(d => xScale(d.data.year))   !!! Свойство "data" не 
существует в типе "[number, 
number]"
    .y0(d => yScale(d.data.value - d.data.value * shift))
    .y1(d => yScale(d.data.value + d.data.value * shift * factor))
    .curve(curveMonotoneX)

return (
    <>
      <Defs
        defs={[
          {
            type: 'linearGradient',
            id: 'gradient',
            colors: [
              {
                offset: 0,
                color: "white",
                opacity: 0

              },
              {
                offset: 10,
                color: "white",
                opacity: 0.02
              },
              {
                offset: 100,
                color: "#1b12c4",
                opacity: opacity
              },
            ],

            x1: '0%', !!! Объектный литерал может использовать только известные 
свойства. "x1" не существует в типе "LinearGradientDef"
            y1: '0%',
            x2: '100%',
            y2: '0%',
          }
        ]}
      />
      <path
        d ={areaGenerator(series[0].data)} !!! Тип "string | null" не может быть 
назначен для типа "string | undefined".
Тип "null" не может быть назначен для типа "string | undefined".ts(2322)
index.d.ts(2504, 9): Ожидаемый тип поступает из свойства "d", объявленного здесь в 
типе "SVGProps<SVGPathElement>"
        fill="url(#gradient)"
        strokeWidth={0}
      />
    </>
  )
}
};`

Сама линия:

 <ResponsiveLine
    data={[{ id: "value", data: data }]}
    margin={{ top: 10, right: 20, bottom: 40, left: 60 }}
    enableSlices={'x'}
    lineWidth={3}
    yScale={{
      type: 'linear',
      stacked: false,
      min: 'auto',
      max: 'auto'
    }} curve="cardinal"
    colors={['#1b12c4']}
    enableGridX={false}
    enableGridY={false}
    axisLeft={{
      format: (v) => axisLeftFormat(v),
      tickValues: ticks,
    }}
    axisBottom={{ format: (v) => axisBottomFormat(v) }}
    animate={true}
    layers={[
      'grid',
      'markers',
      'areas',
      createAreaLayer(0.2, 0.2, 1),
      createAreaLayer(0.4, 0.03, 2),
      'lines',
      'slices',
      'axes',
    ]}
  />