Chartjs React - why time series displaying the non financial hrs and weekend?

Question

I'm currently developing a finance chart using react-chartjs2 - now my problem is it display the non financial hrs and the weekend whenever I ZOOM using this plugin

See here

Here's my current Chartjs option

  const options: ChartOptions<"line"> = {
    layout: {
      padding: {
        right: 10,
      },
    },
    animation: false,
    plugins: {
      zoom: {
        limits: {
          x: {
            max: "original",
            min: "original",
          },
        },
        zoom: {
          scaleMode: "x",
          onZoom: function () {
            props.updateChart(
              props.spreadChartRef.current?.scales.x.min,
              props.spreadChartRef.current?.scales.x.max
            );
          },
          wheel: {
            enabled: true,
            speed: 0.3,
          },
          pinch: {
            enabled: false,
          },

          mode: "x",
        },
        pan: {
          enabled: true,
          mode: "x",
          onPan: function () {
            props.updateChart(
              props.spreadChartRef.current?.scales.x.min,
              props.spreadChartRef.current?.scales.x.max
            );
          },
        },
      },
    },
    elements: {
      point: {
        radius: 0,
        hitRadius: 0,
      },
    },
    scales: {
      x: {
        type: "timeseries",
        time: {
          displayFormats: {
            day: "MMM dd HH:mm",
          },
        },
        min: props.spreadChartRef.current?.options.scales.x.min,
        max: props.spreadChartRef.current?.options.scales.x.max,
        ticks: {
          autoSkip: true,
          autoSkipPadding: 50,
          maxRotation: 0,
          source: "data",
          color: "#8F8F8F",
        },
        grid: {
          display: true,
          color: transparentize("#4f4f4f", 0.9),
        },
      },
      y: {
        type: "linear",
        position: "right",
        beginAtZero: true,
        grid: {
          display: true,
          color: transparentize("#4f4f4f", 0.95),
        },
        min: -5,
        max: 5,
        ticks: {
          color: "#8F8F8F",
        },
      },
    },
  };

I tried playing with the ticks, setting the correct min and max then scale options but no avail. I found some tutorials on youtube and blogs but doesn't come with specific zoom plug in.

Note that my data points is every 5 minutes.