Stacking area line charts with different x-values in data

Question

We use the chart-js-react to build area charts in our service. Our chart will display logs information which is time-based data like, {x:"2022-06-27T21:00:00Z", y:25}.

Since the time could be a random value in each data point, so there are some issue when we want to display a few series with different X-values(different time), as shown in the image. We got overlapping and blank area when the X-value(timestamp) is missing in another series.

Update: checked this Issue: https://github.com/chartjs/Chart.js/issues/7695. I notice they did have some missing/ different X-value. but looks the x-value is not random. when I made the x-values mis-match. same issue: https://codepen.io/derrickwanglf/pen/RwMRMXM

TO Simply demonstrate our issue, I mock some data(real number as x-value) here.

https://codepen.io/derrickwanglf/pen/gOeMvEL

Do you know how can we stack the area chart even the x-values are random?

d0 = [{x:1, y:1}, {x:2, y:11},{x:3, y:1},{x:4, y:11},{x:5, y:10}, {x:6, y:8},{x:7, y:15},{x:8, y:2}]
      
d1= [{x:1, y:1}, {x:2, y:5}, {x:4, y:1}, {x:5, y:3}, {x:5.5, y:4},{x:7, y:5},{x:8, y:3}]

const ctx = document.getElementById("chart").getContext("2d");
const chart = new Chart(ctx, {
  type: "line",
  data: {
    datasets: [
      {
        backgroundColor: "rgba(50,200,50,0.6)",
        borderColor: "rgba(50,200,50,0.6)",
        data: d0,
        fill: "stack"
      },
      {
        backgroundColor: "rgba(200,50,50,0.6)",
        borderColor: "rgba(200,50,50,0.6)",
        data: d1,
        fill: "stack"
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: "linear"
      },
      y: {
        stacked: true,
      }
    },
    elements: {
      line: {
         tension: 0.2
      },
      point: {
        radius: 0
      }
    },
    tooltips: {
      mode: "nearest",
      intersect: false,
      axis: "x"
    },
    hover: {
      mode: "nearest",
      intersect: false,
      axis: "x"
    }
  }
});