I am new to highcharts and i couldn’t find any proper examples to implement my scenario of showing and hiding series in high charts based on user actions in react . Implemented Highcharts in React and TS

  const options = useMemo(() => {
    return {
      chart: {
        events: {
          addSeries: function (e: any) {
            // @ts-ignore

            const chart = this?.chart;
            chart?.redraw();
          },
        },
        zooming: {
          type: 'xy',
        },
      },
      legend: {
        enabled: true,
      },
      accessibility: {
        enabled: false,
      },
      navigator: {
        enabled: false,
      },

      rangeSelector: {
        inputEnabled: false,
        buttonSpacing: 7,
        buttonTheme: {
          fill: 'none',
          stroke: 'none',
          'stroke-width': 0,

          style: {
            color: '#0d0d0d',
            textDecoration: 'none',
          },
          states: {
            hover: { fill: 'none' },
            select: {
              fill: 'none',
              style: {
                color: '#000',
                fontWeight: 'bold',
                textDecoration: 'underline',
              },
            },
          },
        },
        selected: 5,
        enabled: true,
        buttons: [
          {
            type: 'week',
            count: 1,
            text: '1w',
          },
          {
            type: 'month',
            count: 1,
            text: '1m',
          },
          {
            type: 'month',
            count: 6,
            text: '6m',
          },
          {
            type: 'year',
            count: 1,
            text: '1y',
          },
          {
            type: 'all',
            text: 'All',
          },
        ],
      },
      xAxis: {
        events: {
          afterSetExtremes: function (e: any) {
            // @ts-ignore
            // We don't have any other method to update series data
            const chart = this.chart;
            startingValueRef.current = getDynamicStartingValue(e.min);
            dynamicStartingValueRef.current = getDynamicStartingValue(e.min);
            chart.series[0].update({
              threshold: dynamicStartingValueRef.current,
              zones: startingValueRef?.current
                ? [
                    {
                      value: startingValueRef.current, // for loss

                      color: selectedReference?.symbol
                        ? colors.profitBorder
                        : colors.lossBorder,

                      fillColor: {
                        linearGradient: {
                          x1: 0,
                          y1: 1,
                          x2: 0,
                          y2: 0,
                        },
                        stops: [
                          [0, colors.lossFill],
                          [1, '#fff'],
                        ],
                      },
                    },
                    {
                      color: colors.profitBorder, // for profit
                      fillColor: {
                        linearGradient: {
                          x1: 0,
                          y1: 0,
                          x2: 0,
                          y2: 1,
                        },
                        stops: [
                          [0, colors.profitFill],
                          [1, '#fff'],
                        ],
                      },
                    },
                  ]
                : undefined,
            });
          },
        },
      },

      yAxis: [
        {
          opposite: false,
          title: {
            text: ' ',
          },
        },
        {
          opposite: false,
        },
        {
          opposite: false,
        },
      ],
      plotOptions: {
        series: {
          marker: {
            enabled: true,
            radius: 3,
            symbol: 'circle',
          },
        },
      },

      tooltip: {
        pointFormat:
          '<span style="fontSize:12px; fontWeight:200 ">{series.name}</span>: <b>{point.y}</b><br/>',
        valueDecimals: 0,
        split: false,
        shared: true,
      },

      series: [
        {
          id: 'aumWithPayouts',
          yAxis: 0,
          name: 'Holding anum + payouts',
          visible: selectedReference?.symbol ? false : true,
          data: selectedReference?.symbol ? [] : netWorthWithPayouts,
          color: colors.profitBorder,
          type: 'line',
        },

        {
          name: 'Holding anum',
          color: colors.lossBorder,
          threshold: dynamicStartingValueRef.current,
          yAxis: 0,
          visible: selectedReference?.symbol ? false : true,
          data: selectedReference?.symbol ? [] : netWorth,
          type: 'areaspline',

          zones: startingValueRef.current
            ? [
                {
                  value: startingValueRef.current, // for loss
                  color: selectedReference?.symbol
                    ? colors.profitBorder
                    : colors.lossBorder,

                  fillColor: {
                    linearGradient: {
                      x1: 0,
                      y1: 1,
                      x2: 0,
                      y2: 0,
                    },
                    stops: [
                      [0, colors.lossFill],
                      [1, '#fff'],
                    ],
                  },
                },
                {
                  color: colors.profitBorder, // for profit
                  fillColor: {
                    linearGradient: {
                      x1: 0,
                      y1: 0,
                      x2: 0,
                      y2: 1,
                    },
                    stops: [
                      [0, colors.profitFill],
                      [1, '#fff'],
                    ],
                  },
                },
              ]
            : undefined,
        },
        {
          type: 'flags',
          name: 'Dividends',
          yAxis: 0,
          zIndex: 2,

          visible: selectedReference?.symbol ? false : true,
          data: selectedReference?.symbol ? [] : dividends,

          onSeries: 'aumWithPayouts',
          shape: 'squarepin',
          color: '#c5c5c5',
          tooltip: {
            valueDecimals: 2,
            pointFormat:
              '<span style="fontSize:12px; fontWeight:200 ">{series.name}</span>: Rs{point.text}  <br/>',
          },
        },

        {
          name: selectedReference?.symbol || 'Index',

          yAxis: 1,
          type: 'line',
          visible: selectedReference?.symbol ? true : false,
          data: selectedReference?.symbol ? reference : [],

          tooltip: {
            valueDecimals: 2,
            valueSuffix: '%',
          },
        },
        {
          name: 'Daily PNL',
          yAxis: 1,
          type: 'line',
          visible: selectedReference?.symbol ? true : false,
          data: selectedReference?.symbol ? netWorth : [],
          tooltip: {
            valueSuffix: '%',
          },
        },
      ],
    };
  }, [
    getDynamicStartingValue,
    netWorthWithPayouts,
    selectedReference?.symbol,
    netWorth,
    reference,

    dividends,
  ]);

  return (
    <>
      <HighchartsReact
        constructorType={'stockChart'}
        highcharts={Highcharts}
        options={options}
        oneToOne={true}
      />
    </>
  );

how my chart looks on first render

[how my chart displays last two series when i click on add comparison button
(https://i.sstatic.net/53WG2QgH.png)

I am displaying series in high charts based on user actions. I show the first three series on first render. After a user action, i display the last two series , and when the user wants to view the data of first three series again. i hide the last two series to show the first three and this is where i get the Error , cannot read properties of undefined reading ‘remove points’

I do not get this error if i comment out the ‘flags’ series