Custom chakra UI stepper steps not evenly spaced

That is what it currently looks like, I want the steps to be evenly spaced. Using flexbox seems not to apply changes for some reason. Documentation & AI hasn't helped either.

Theme file in question:

export const stepperTheme = defineStyleConfig({
  baseStyle: {
    step: {
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      position: "relative",
    },

    separator: {
      position: "absolute",
      top: "20px",
      left: "50%",
      height: "2px",
      bgColor: "grey.600",
      zIndex: "-1",
    },

    indicator: {
      zIndex: "1",
      width: "40px",
      height: "40px",

      "&[data-status=complete]": {
        bgColor: "cyan.600",
        borderColor: "cyan.600",
        borderWidth: "3px",
      },

      "&[data-status=active]": {
        bgColor: "cyan.600",
        borderColor: "cyan.600",
        outline: "2.5px solid white",
        outlineOffset: "-4px",
      },

      "&[data-status=incomplete]": {
        bgColor: "white",
        borderColor: "grey.600",
        borderWidth: "2px",
      },
    },
  },
});

I wouldn't modify the styles heavily like that.

Perhap something likes this:

const steps = [
  { title: "First", description: "Contact Info" },
  { title: "Second", description: "Date & Time" },
  { title: "Third", description: "Select Rooms" },
  { title: "Fourth", description: "Select time" },
  { title: "fifth", description: "Select place" },
];

export const App = () => {
  return (
    <div style={{ margin: "50px" }}>
      <Stack>
        <Stepper size="sm" gap="0">
          {steps.map((step, index) => (
            <Step key={index} gap="0">
              <StepIndicator>
                <div
                  style={{ position: "relative", top: "25px", color: "black" }}
                >
                  {step.title}
                </div>
              </StepIndicator>
              <StepSeparator _horizontal={{ ml: "0" }} />
            </Step>
          ))}
        </Stepper>
      </Stack>
    </div>
  );
};

Here is a working sample: https://codesandbox.io/p/sandbox/charka-ui-steppers-sample-mfq8mh