🐛[BUG] 2.x 版本无法动态改变 `xxxxField`

[2013xile]

🐛 bug 描述 [详细地描述 bug，让大家都能理解]

📷 复现步骤 [清晰描述复现步骤，让别人也能看到问题]

如动图所示，第一次增加 shapeField 设置以后，图形可以渲染为平滑曲线，再去掉 shapeField 配置以后，图形不能恢复原来的形状，除非手动设置为 area. 这样非常麻烦，折线图、面积图都需要单独处理。 同时，colorField, seriesField 也有类似情况，这两字段就不知道怎么处理才能恢复，除非重新渲染整个组件。

🏞 期望结果 [描述你原本期望看到的结果]

希望去掉对应 xxxxField 配置，可以恢复原来的图形。

💻 复现代码 [提供可复现的代码，仓库，或线上示例]

https://ant-design-charts.antgroup.com/zh/examples/statistics/area/#area-gradient

import React from 'react';
import ReactDOM from 'react-dom';
import { Area } from '@ant-design/plots';

const DemoArea = () => {
  const [smooth, setSmooth] = React.useState(false);
  const config = {
    data: {
      type: 'fetch',
      value: 'https://assets.antv.antgroup.com/g2/stocks.json',
      transform: [{ type: 'filter', callback: (d) => d.symbol === 'GOOG' }],
    },
    xField: (d) => new Date(d.date),
    yField: 'price',
    ...(smooth ? { shapeField: 'smooth' }  : {}),
    style: {
      fill: 'linear-gradient(-90deg, white 0%, darkgreen 100%)',
    },
    axis: {
      y: { labelFormatter: '~s' },
    },

  };
  return <><div onClick={() => setSmooth(!smooth)}>{`smooth: ${smooth}`}</div><Area {...config} /></>;
};

ReactDOM.render(<DemoArea />, document.getElementById('container'));

只有 xxxxField 这几个配置会这样，其他配置项是可以通过此方法动态设置的。

[lxfu1]

 ...(smooth ? { shapeField: 'smooth' }  : {shapeField: 'area'}),

[2013xile]

 ...(smooth ? { shapeField: 'smooth' }  : {shapeField: 'area'}),

这个处理比较麻烦，感觉不是很符合预期。另外 colorField, seriesField设置后也有这种情况，应该怎么处理？