Chart JS multi axes | Line chart + Bar Chart | Dots are appearing in middle instead of Aligning with chart

Question

I am working with chartjs Version (4.4.0).

I am looking to plot combo chart (Two bar charts and Two line charts). Where 1 line and bar chart belong to current year data and other belong to previous year.

Below may not be relavant to the problem, but thought of mentioning I have a default x axes and y axes, and a extra parallel y axes(z axis) which has a another scale for the data.

I used below configuration to plot the chart.

 {
      indexAxis: 'x',
      maxBarThickness: 32,
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: {
          title: {
            display: true,
            text: 'Dummy Title'
          }
        },
        y: {
          beginAtZero: true,
          type: 'linear',
          position: 'left',
          title: {
            display: true,
            text: 'Y axis title
          },
          ticks: {
            callback: (value: any) => 'Callback for ticks formatting'
          }
        },
        z: {
          beginAtZero: true,
          type: 'linear',
          position: 'right',
          grid: {
            drawOnChartArea: false
          },
          title: { 
               display: true, 
               text: 'Z axis title'
          }
        }
      },
      interaction: {
        mode: 'index',
        intersect: false
      },
      layout: {
        padding: {
          bottom: 15
        }
      },
      plugins: {
        tooltip: {
          enabled: true
          }
        }
      }
    };

Actual Output: Actual

Expectation : I want to align line chart dots with the bar charts. Expectation