[Bug] Custom series graphic elements rendering bug after updating

[zangzimi]

Version

5.3.3

Link to Minimal Reproduction

Reproduction Link

Steps to Reproduce

var cellSize = [50, 51];

option = {
  calendar: [
    {
      orient: 'vertical',
      cellSize: cellSize,
      yearLabel: {
        show: false
      },
      monthLabel: {
        show: false
      },
      range: ['2022-1']
    }
  ],
  series: [
    {
      type: 'custom',
      name: 'a',
      coordinateSystem: 'calendar',
      data: [
        ['2022-01-16', 'a', false]
      ],
      renderItem: (params, api) => {
        const date = api.value(0);
        const cellPoint = api.coord(date);
        const xPos = cellPoint[0] - cellSize[0] / 2;
        const yPos = cellPoint[1] - cellSize[1] / 2;
        const name = api.value(1);
        const cellWidth = params.coordSys.cellWidth;
        const position = [xPos, yPos];
        const rect = {
          type: 'rect',
          shape: {
            x: 0,
            y: 0,
            width: cellWidth,
            height: 15
          },
          position,
          style: {
            fill: '#eee'
          },
          textContent: {
            style: {
              text: name,
              fill: '#888',
              overflow: 'truncate',
              width: cellWidth,
              height: 13,
              y: 1
            }
          },
          textConfig: {
            position: 'insideLeft',
            distance: 2
          }
        };

        const borderLeft = api.value(2)
          ? null
          : {
              type: 'rect',
              shape: {
                x: 0,
                y: 0,
                width: 2,
                height: 15
              },
              position,
              style: {
                fill: 'red'
              }
            };

        const group = {
          type: 'group',
          children: [rect, borderLeft]
        };
        return group;
      },
      silent: true,
      z: 2,
      legendHoverLink: true,
      clip: false,
      label: {},
      emphasis: { label: {} }
    }
  ]
};

setTimeout(function () {
  myChart.setOption({
    calendar: {
      range: ['2022-02']
    },
    series: [
      {
        type: 'custom',
        name: 'a',
        data: [
          ['2022-02-13', 'b', true]
        ]
      }
    ]
  });
}, 1000);

(Detailed steps are shown in the above demo) This problem occurs only after the second setOption.

Current Behavior

Note that after one second, there is an extra red bar at the third Sunday (the block under e). This is the error left behind the previous setOption and it won't exist if it does not exist in the previous setOption.

Expected Behavior

There should not be a red bar at the green position above.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

I'm not sure if this relates with #17185 which should have been fixed in #17308. I tested with 5.3.4-dev.20220707 and this problem still exists.