[Bug] Chart Background shows [object Object]

[TharinduDG]

Describe the bug LineChart background showing [object Object]

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOS 12.2
• Browser [e.g. chrome, safari]: Chrome
• @antv/g2plot Version [e.g. v2.3.12]
• @opd/g2plot-react Version [e.g. v2.7.0] v2.12.0

Additional context Add any other context about the problem here.

[kagawagao]

@TharinduDG please provide a mini showcase or base options

[TharinduDG]

@kagawagao LineChart configuration

{
    width: 400,
    height: 200,
    stepType: 'vhv',
    autoFit: false,
    xField: 'ts',
    yField: 'v',
    seriesField: 'day',
    animation: {
      appear: {
        animation: 'path-in',
        duration: 1000,
      },
    },
    yAxis: {
      label: {
        formatter: volumeToLabel,
      },
    },
    xAxis: {
      label: {
        formatter: (dateTime: string) => timeSecondsToLabel(dateTime, false)
      },
      nice: true
    },
    tooltip: {
      title: 'v',
      showTitle: false,
      shared: true,
      formatter: (datum: Record<string, string>) => {
        return {name: timeSecondsToLabel(datum.ts, true), value: datum.v.toLocaleString()};
      },
    },
    color: ['#000000', '#2ca02c'],
  }

  
  function timeSecondsToLabel(v: string, withSeconds: boolean) {
  let secondsOfDay = parseInt(v, 10)
  const hour = Math.floor(secondsOfDay / 3600);
  secondsOfDay %= 3600;
  const minute = Math.floor(secondsOfDay / 60);
  const second = secondsOfDay % 60;

  return withSeconds ? `${hour}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}` : `${hour}:${minute.toString().padStart(2, '0')}`
}

function volumeToLabel(v: string): string {
  const volume = parseInt(v, 10) / 10e3
  return `${volume.toFixed(0)}`
}

[kagawagao]

There is no such issue with same config in CodeSandbox