Legend onClick handler doesn't select the right item in Arabic #5289

Steps to reproduce :

 function getLegendItems() {
    let items: any = []
    let currentItem = {}
    for (var i = 0; i < leftLegendNames.size + rightLegendNames.size; i++) {
      if (i < leftLegendNames.size) {
        currentItem = {
          id: leftKeys[i],
          name: legendNames ? legendNames.get(leftKeys[i]) : leftKeys[i],
          value: leftKeys[i],
          marker: {
            symbol: legendSymbol(yAxisLeftTypes[yAxisLeftNames.indexOf(leftValues[i])]),
            style: {
              inactiveFill: '#FFFFFFFF',
              fill: legendIndices.includes(i) ? colors[i % colors.length] : '#FFFFFFFF',
              stroke: legendIndices.includes(i) ? colors[i % colors.length] : '#FFFFFFFF'
            },
            // spacing: localStorage.getItem('i18nextLng') === 'ar' ? -20 : 5,
          },
          unchecked: legendIndices.includes(i) ? false : true
        }
      }
      else {
        currentItem = {
          id: rightKeys[i - leftKeys.length],
          name: legendNames ? legendNames.get(rightKeys[i - leftKeys.length]) : rightKeys[i - leftKeys.length],
          value: rightKeys[i - leftKeys.length],
          marker: {
            symbol: legendSymbol(yAxisRightTypes[yAxisRightNames.indexOf(rightValues[i - leftKeys.length])]),
            style: {
              inactiveFill: '#FFFFFFFF',
              fill: legendIndices.includes(i) ? colors[i % colors.length] : '#FFFFFFFF',
              stroke: legendIndices.includes(i) ? colors[i % colors.length] : '#FFFFFFFF'
            },
            // spacing: localStorage.getItem('i18nextLng') === 'ar' ? -20 : 5,
          },
          unchecked: legendIndices.includes(i) ? false : true
        }
      }
      items[i] = currentItem
    }
    return items
  }
const currentChart = new Chart({
        container: ref.current as any,
        autoFit: true,
        height: height,
      });
  currentChart.legend({
        itemHeight: 50,
        itemWidth: legendWidth,
        position: legendPosition,
        flipPage: true,
        itemName: {
          style: {
            fill: '#46AAA0',
            inactiveFill: '#FFFFFF',
            stroke: '#000'
          },
        },
        custom: true,
        items: getLegendItems(),
        marker: {
          spacing: localStorage.getItem('i18nextLng') === 'ar' ? -15 : 5,
        },
      });
 currentChart.on('legend-item:click', (e: MouseEvent) => {
        const index = (e.target as any).cfg.delegateObject.index
        // get the prvious index not the right one
      });