React Highchart Reverse the order of tooltip data

In my code, I have a dataset rendered in bar format using a highchart. The current implementation of UI looks like this:

What i need is that in the tooltip, I need to revert the data info. Instead of ‘Follow’, then ‘Lead’, it should be like: ‘Lead’ and then ‘Follow’, along with their respective data values as per the bar chart.

Here is the code done so far:

App.js

import {
  DummyData,
  PercentageBarChart,
} from "./Component/Sparkline/ChartCollection";
function App() {
  const mapperValue = (chartDetails, header) => {
    switch (chartDetails.type) {
      case "area": {
        const options = {
          series: [
            {
              data: chartDetails.data,
              pointStart: 1,
            },
          ],
          tooltip: {
            headerFormat: `<span style="font-size:10px">${header}, Q{point.x}: </span><br/>`,
            pointFormat: "<b>{point.y}.000</b> USD",
          },
          chart: {
            type: chartDetails.type,
          },
        };
        return <SparkLine options={options} />;
      }
      case "bar": {
        const color =
          chartDetails?.stacked === "normal"
            ? ["#B5E3D8", "#66C8C2", "#118C7D", "#004C45"]
            : ["#F5E887", "#00A499"];
        const series = chartDetails.data.map((item, index) => {
          return {
            ...item,
            color: color[index],
          };
        });
        const options = PercentageBarChart({
          series,
          stacked: chartDetails?.stacked || "percentage",
          dataLabel: chartDetails?.dataLabel,
          name: header,
        });

        return (
            <SparkLine options={options} />
        );
      }
      default:
        return chartDetails.data.map((item) => {
          return `${item.name} || `;
        });
    }
  };

ChartCollection.js

export const DummyData = [
  {
    name: "AON",
    lead_follow: {
      type: "bar",
      data: [
        { name: "Follow", data: [72] },
        { name: "Lead", data: [28] },
      ],
      dataLabel: {
        visible: true,
      },
    },
    types: {
      type: "bar",
      stacked: "normal",
      data: [
        { name: "Open", data: [45] },
        { name: "Deleg", data: [120] },
        { name: "Pool", data: [31] },
      ],
      dataLabel: {
        visible: false,
      },
    },
    avg_cost_acquisition: 35,
    avg_cost_brokerage: 23,
  },
];
const disableDataLabel = ["Follow", "Lead"];
export const PercentageBarChart = (props) => {
  props.series.forEach((seriesItem) => {
    if (disableDataLabel.includes(seriesItem.name)) {
      seriesItem.dataLabels = {
        enabled: false, // Disable data labels for "New", "old", and "other"
      };
    }
  });

  const plotOptions =
    props.stacked === "percentage"
      ? {
          bar: {
            stacking: "percent",
            dataLabels: {
              enabled: props.dataLabel.visible,
              format: "{point.y:.0f}%",
              x: props?.series?.dataLabel?.x || null,
              y: props?.series?.dataLabel?.y || null,
              verticalAlign: "middle",
              inside: false,
              style: {
                fontSize: "0.75rem",
                textOutline: "0px",
              },
            },
          },
        }
      : {
          series: {
            stacking: "normal",
            dataLabels: {
              enabled: props.dataLabel.visible,
              style: {
                fontSize: "0.75rem",
                textOutline: "0px", // Remove outline to avoid overlapping
              },
            },
          },
        };

  return {
    chart: {
      backgroundColor: "transparent",
      borderWidth: 0,
      type: "bar",
      margin: [2, 0, 2, 0],
      width: 200,
      height: 50,
      style: {
        overflow: "visible",
      },
      skipClone: true,
    },
    title: {
      text: null,
    },
    credits: {
      enabled: false,
    },
    yAxis: {
      endOnTick: false,
      startOnTick: false,
      labels: {
        enabled: false,
      },
      title: {
        text: null,
      },
      tickPositions: [0],
    },
    legend: {
      enabled: false,
      align: "left",
      x: 10,
      verticalAlign: "top",
      layout: "horizontal",
      y: 0,
    },
    tooltip: {
      headerFormat: `<span style="font-size:10px">${props.name}</span><br/>`,
      pointFormatter: function () {
        console.log("inside point formattor", this);
        var point = this,
          series = point.series;
        return `<div style="align-items: baseline">${series.name} <hr style="display:inline-block; position: relative; top: 5px; width:${point.y}px; height: 10px; font-size: 10px" color=${point.color}> <b>${point.y}</b><br /></div>`;
      },
    },
    plotOptions: plotOptions,
    series: props.series || [],
  };
};

I tried to update the code in App.js like this:

//.......
    const options = PercentageBarChart({
          series,
          stacked: chartDetails?.stacked || "percentage",
          dataLabel: chartDetails?.dataLabel,
          name: header,
        });

        const modifiedOptions = JSON.parse(JSON.stringify(options));

        modifiedOptions["tooltipSeries"] = [...series].reverse();
        console.log({ modifiedOptions });
//......

and it prints the console of options as expected:

Then passing the modifiedOptions as props, instead of options, is also not working:
//…

 <SparkLine options={modifiedOptions} />

...//

If anyone can help fix the same, will be appreciated!