My Annotation is not working when I try to update my apex chart version from v3.6.12 to v3.31.0

I have troubleshot the example but failed to get any results as it still gets the higher values correctly.

Can anybody tell me what I am doing wrong?

Below is my code snippet which is responsible for annotation

events: {
     mounted: function(ctx, config) {
        const highest1 = ctx.getHighestValueInSeries(0);
        const highest2 = ctx.getHighestValueInSeries(1);
          
        console.log(highest1)
        console.log(highest2)
        console.log(ctx)
          
  
        ctx.addPointAnnotation({
            x: new Date(ctx.w.globals.seriesX[0][ctx.w.globals.series[0].indexOf(highest1)]).getTime(),
            y: highest1,
            label: {
              style: {
                cssClass: 'd-none'
              }
            },
            customSVG: {
                SVG: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="#2196f3" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>',
                cssClass: undefined,
                offsetX: -8,
                offsetY: 5
            }
          })
  
          ctx.addPointAnnotation({
            x: new Date(ctx.w.globals.seriesX[1][ctx.w.globals.series[1].indexOf(highest2)]).getTime(),
            y: highest2,
            label: {
              style: {
                cssClass: 'd-none'
              }
            },
            customSVG: {
                SVG: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="#e7515a" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>',
                cssClass: undefined,
                offsetX: -8,
                offsetY: 5
            }
        })
     },
  }

Old Version ( v3.6.12 ) Example

https://jsfiddle.net/54vfoarg/

New Version ( v3.31.0 ) Example

https://jsfiddle.net/6287uvc5/

Note: - The method is provided by Apex Chart creator on StackOverflow

Apexcharts, how do I find positional value for the highest and lowest marker on the line, so i can add an image to that one specific marker?