When i do selection in brush chart it removes xaxis annotation but it works on selection in main chart | React

[MikhailLyvak]

When i do selection in brush chart it removes xaxis annotation but it works on selection in main chart

Steps to Reproduce

1. Create main chart with annotation on React.

export const combinedChartDataOptions = (chartData: ChartData) => {
  const chartOptions: ApexOptions = {
    series: [
      {
        name: 'Bait filling',
        type: 'area',
        data: chartData.bait_filling || [],
        color: '#6A37D4',
      },
      {
        name: 'Eaten bait',
        type: 'bar',
        data: chartData.eaten_bait || [],
        color: '#fae600',
      },
    ],
    chart: {
      id: 'main-chart',
      height: 350,
      type: 'line',
      stacked: false,
      zoom: {
        enabled: true,
        type: 'x',
      },
      toolbar: {
        show: true,
      },
    },
    markers: {
      size: 0,
      shape: undefined,
    },
    stroke: {
      show: true,
      width: [2, 2],
      curve: 'smooth',
    },
    fill: {
      opacity: [0.2, 0.6],
    },
    plotOptions: {
      bar: {
        columnWidth: '20%',
        borderRadius: 3,
        hideZeroBarsWhenGrouped: true,
        borderRadiusApplication: 'around',
      },
    },
    xaxis: {
      categories: chartData.date_time || [],
      offsetY: 1,
      labels: {
        trim: false,
        style: {
          colors: '#9aa0ac',
        },
      },
      type: 'category',
      tickPlacement: 'on',
    },
    dataLabels: {
      enabled: true,
      background: {
        enabled: true,
      },
    },
    annotations: {
      xaxis: chartData.annotations,
    },
  };

  return chartOptions;
};

2. Creact brush chart for it

// Brush chart options
export const brushChartOptions = (chartData: ChartData) => {
  const brushOptions: ApexOptions = {
    series: [
      {
        name: 'Bait filling',
        type: 'line',
        data: chartData.bait_filling || [],
        color: '#6A37D4',
      },
    ],
    chart: {
      id: 'brush-chart',
      height: 100,
      type: 'line',
      stacked: false,
      zoom: {
        enabled: true,
        type: 'x',
      },
      brush: {
        enabled: true,
        target: 'main-chart',
      },
      // selection: {
      //   enabled: true,
      //   type: 'x',
      //   xaxis: {
      //     min: chartData.date_time.length - 10,
      //     max: chartData.date_time.length - 1,
      //   },
      // },
    },
    xaxis: {
      categories: chartData.date_time || [],
      offsetY: 1,
      labels: {
        trim: false,
        style: {
          colors: '#9aa0ac',
        },
      },
      type: 'category',
      tickPlacement: 'on',
    },
    plotOptions: {
      bar: {
        columnWidth: '50%',
        borderRadius: 3,
      },
    },
    legend: {
      show: false,
    },
    dataLabels: {
      enabled: false,
    },
    annotations: {
      xaxis: chartData.annotations,
    },
  };

  return brushOptions;
};

3. Select are in brush chart and annotation will disapear

Annotation must be shown

Desapear when use selection on brush chart but works correct on main chart selection

Screenshots

[Reproduction Link]

(https://youtu.be/5rmkTVuVTHg) <= Video of problem
https://codesandbox.io/p/sandbox/react-basic-example-forked-dqzsc2 <= CodePen reprodution