Highchart gantt/xrange chart styling with data not plotting aligned to labels

Question

I am getting data plot not properly with datapoint plotted not aligned with y axis labels. Below is my code :

import React from "react";
import { render } from "react-dom";
import HighchartsReact from "highcharts-react-official";
import Xrange from "./XRange";
import Highcharts from "highcharts/highcharts-gantt";
import XRangeModule from "highcharts/modules/xrange";
import exporting from "highcharts/modules/exporting";
exporting(Highcharts);
XRangeModule(Highcharts);

const options = {
  xAxis: [
    {
      currentDateIndicator: {
        color: "#2caffe",
        dashStyle: "ShortDot",
        width: 2,
        label: {
          format: ""
        }
      },
      type: "datetime",
      tickInteval: 2592000000,
      minTickInteval: 2419200000,
      units: [["month", [1]]],
      grid: {
        borderWidth: 0
      },
      gridLineWidth: 1,
      labels: {
        style: {
          fontSize: 12
        }
      },
      min: 1690214400000,
      max: 1706112000000
    },
    {
      visible: false
    }
  ],
  yAxis: {
    categories: ["Jax", "Yan", "Jiali"],
    tickPixelInterval: 10
  },
  plotOptions: {
    series: {
      connectors: {
        dashStyle: "ShortDot",
        lineWidth: 2,
        radius: 5,
        startMarker: {
          enabled: false
        }
      },
      groupPadding: 0,
      dataLabels: [
        {
          enabled: true,
          align: "left",
          padding: 5,
          style: {
            fontWeight: "normal",
            fontSize: 10,
            textOutline: "none",
            color: "black",
            whiteSpace: "nowrap",
            textOverflow: "ellipsis"
          }
        }
      ],
      animation: false
    }
  },
  rangeSelector: {
    enabled: false,
    buttons: [
      {
        type: "month",
        count: 6,
        text: "6M"
      },
      {
        type: "ytd",
        text: "FYTD"
      }
    ],
    selected: 1
  },
  tooltip: {
    outside: true,
    followPointer: true,
    animation: false,
    hideDelay: 0
  },
  chart: {
    type: "xrange",
    style: {
      fontFamily: "Jost",
      fontSize: 15,
      marginTop: -10
    }
  },
  exporting: {
    buttons: {
      contextButton: {
        y: 10
      }
    }
  },
  credits: {
    enabled: false
  },
  dataLabels: {
    enabled: true
  },
  series: [
    {
      name: "Jax",
      type: "xrange",
      data: [
        {
          name: "Jax",
          strat: "Jax",
          id: "jax",
          parent: "out_of_office",
          start: 1700179200000,
          end: 1700956800000,
          description: "On Leave",
          color: "rgb(128, 224, 208)",
          completed: {
            amount: 1,
            fill: "rgb(128, 224, 208)"
          },
          x: 1700179200000,
          x2: 1700956800000,
          y: 0.5,
          pointWidth: 20
        },
        {
          name: "Jax",
          strat: "Jax",
          id: "jax",
          parent: "out_of_office",
          start: 1701734400000,
          end: 1702080000000,
          description: "On Leave",
          color: "rgb(128, 224, 208)",
          completed: {
            amount: 1,
            fill: "rgb(128, 224, 208)"
          },
          x: 1701734400000,
          x2: 1702080000000,
          y: 0.5,
          pointWidth: 20
        }
      ]
    },
    {
      name: "Yan",
      type: "xrange",
      data: [
        {
          name: "Yan",
          strat: "Yan",
          id: "yan",
          parent: "out_of_office",
          start: 1695081600000,
          end: 1695600000000,
          description: "On Leave",
          color: "rgb(255, 128, 128)",
          completed: {
            amount: 1,
            fill: "rgb(255, 128, 128)"
          },
          x: 1695081600000,
          x2: 1695600000000,
          y: 1.5,
          pointWidth: 20
        }
      ]
    },
    {
      name: "Jiali",
      type: "xrange",
      data: [
        {
          name: "Jiali",
          strat: "Jiali",
          id: "jiali",
          parent: "out_of_office",
          start: 1695340800000,
          end: 1695600000000,
          description: "Leave",
          color: "rgb(128, 144, 255)",
          completed: {
            amount: 1,
            fill: "rgb(128, 144, 255)"
          },
          x: 1695340800000,
          x2: 1695600000000,
          y: 2.5,
          pointWidth: 20
        }
      ]
    },
    {
      name: "Jackson",
      type: "xrange",
      data: [
        {
          name: "Jackson",
          strat: "Jackson",
          id: "jackson",
          parent: "out_of_office",
          start: 1693785600000,
          end: 1694736000000,
          description: "On Leave",
          color: "rgb(128, 224, 128)",
          completed: {
            amount: 1,
            fill: "rgb(128, 224, 128)"
          },
          x: 1693785600000,
          x2: 1694736000000,
          y: 4,
          pointWidth: 20
        }
      ]
    },
    {
      name: "Yanxi",
      type: "xrange",
      data: [
        {
          name: "Yanxi",
          strat: "Yanxi",
          id: "yanxi",
          parent: "out_of_office",
          start: 1693872000000,
          end: 1693872000000,
          description: "On Leave",
          color: "rgb(255, 192, 128)",
          completed: {
            amount: 1,
            fill: "rgb(255, 192, 128)"
          },
          x: 1693872000000,
          x2: 1693872000000,
          y: 5,
          pointWidth: 20
        },
        {
          name: "Yanxi",
          strat: "Yanxi",
          id: "yanxi",
          parent: "out_of_office",
          start: 1694044800000,
          end: 1694131200000,
          description: "On Leave",
          color: "rgb(255, 192, 128)",
          completed: {
            amount: 1,
            fill: "rgb(255, 192, 128)"
          },
          x: 1694044800000,
          x2: 1694131200000,
          y: 5,
          pointWidth: 20
        },
        {
          name: "Yanxi",
          strat: "Yanxi",
          id: "yanxi",
          parent: "out_of_office",
          start: 1694649600000,
          end: 1694649600000,
          description: "On Leave",
          color: "rgb(255, 192, 128)",
          completed: {
            amount: 1,
            fill: "rgb(255, 192, 128)"
          },
          x: 1694649600000,
          x2: 1694649600000,
          y: 5,
          pointWidth: 20
        }
      ]
    }
  ]
};

export default function Poc() {
  return (
    <HighchartsReact
      constructorType="ganttChart"
      highcharts={Highcharts}
      options={options}
    />
  );
}

https://codesandbox.io/s/eager-moser-rrzc9q?file=/src/Poc.js:0-6455

I have two requirements :

1. I need data to be in flex with 40:60 with left section with heading & title
2. I need data aligned with categories on y axis I have tried some properties with no desired outcome