Lightningchart JS - Chart is not interactable

Question

I have 5 different line charts being rendered in my React app. Below is one of the methods to create those charts.

function createEcgHeartRateChart(
    response: any,
    startInterval: string,
    endInterval: string
  ) {
    response?.sort(
      (a, b) =>
        new Date(a.resource.effectiveDateTime).getTime() -
        new Date(b.resource.effectiveDateTime).getTime()
    );

const chart = lc
  .ChartXY({
    theme: Themes.darkGold,
  })
  .setTitle("ECG Heart Rate")
  .setMouseInteractions(false);

chart
  .getDefaultAxisX()
  .setInterval({
    start: new Date(subtractUTC530(startInterval)).getTime(),
    end: new Date(subtractUTC530(endInterval)).getTime(),
  })
  .setTickStrategy(AxisTickStrategies.DateTime)
  .setMouseInteractions(false);

chart
  .getDefaultAxisY()
  .setInterval({ start: 60, end: 100 })
  .setMouseInteractions(false);

let ecgHeartRate: any[] = [];

response?.forEach((item) => {
  item?.resource?.component?.forEach((pastData) => {
    if (pastData?.code?.coding[0]?.code === "ecgHeartRate") {
      ecgHeartRate.push({
        x: new Date(
          subtractUTC530(item?.resource?.effectiveDateTime)
        ).getTime(),
        y: parseInt(pastData?.valueString),
      });
    }
  });
});

chart.addPointLineSeries().setName("").setPointSize(10).add(ecgHeartRate);

ecgHeartRate?.map((item) => {
  return chart
    .addUIElement(UIElementBuilders.TextBox, {
      x: chart.getDefaultAxisX(),
      y: chart.getDefaultAxisY(),
    })
    .setPosition({ x: item?.x, y: item?.y })
    .setVisible(true)
    .setText(item.y.toString())
    .setMouseInteractions(false);
});

const ecgChartContainer = document.getElementById("ecg-heart-rate-chart");
if (ecgChartContainer) {
  ecgChartContainer.replaceChildren(chart.engine.container);
  ecgChartContainer.onscroll = () => {
    chart.engine.layout();
  };
}
}

JSX: <div id="ecg-heart-rate-chart" className="history-chart"></div>

The issue I am facing is the the charts become uninteractable when scrolling on the page. Came around this: chart-is-not-interactable/

Added the logic as per doc, but still the charts are uninteractable.

Lightnintchart JS Version: "@arction/lcjs": "^5.0.5"

Is there a way to fix these?

I tried adding the logic to tell the chart that the page is scrolling as per docs. But didn't work.