How to fix the color "bug" in Materia UI Stepper

Question

That is my react code:

import * as React from "react";
import Box from "@mui/material/Box";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import StepContent from "@mui/material/StepContent";
import Button from "@mui/material/Button";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import { styled as styledMui } from "@mui/material/styles";

const steps = [
  {
    label: "Select campaign settings",
  },
  {
    label: "Create an ad group",
  },
  {
    label: "Create an ad",
  },
];

const StyledStepLabel = styledMui(StepLabel)(({ theme }) => ({
  fontWeight: 500,
  fontSize: "17px",
  "& .Mui-active": {
    fontFamily: "Poppins, sans-serif",
    fontWeight: 500,
    fontSize: "17px",
    color: "#1ed760",
  },
  "& .Mui-completed": {
    fontFamily: "Poppins, sans-serif",
    fontWeight: 500,
    fontSize: "17px",
    color: "#1ed760",
  },
  "& .Mui-disabled": {
    fontFamily: "Poppins, sans-serif",
    fontWeight: 500,
    fontSize: "17px",
    color: "#1ed760",
  },
  "& .MuiStepLabel-label .Mui-active .css-1hv8oq8-MuiStepLabel-label": {
    color: "#1ed760",
  },
  "& .MuiStepLabel-label .Mui-completed .css-1hv8oq8-MuiStepLabel-label": {
    color: "#1ed760",
  },
}));

export default function VerticalLinearStepper() {
  const [activeStep, setActiveStep] = React.useState(1);

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleReset = () => {
    setActiveStep(0);
  };

  return (
    <Box sx={{ maxWidth: 400 }}>
      <Stepper activeStep={activeStep} orientation="vertical" sx={{}}>
        {steps.map((step, index) => (
          <Step key={step.label}>
            <StyledStepLabel
              optional={
                index === 2 ? (
                  <Typography variant="caption">Last step</Typography>
                ) : null
              }
            >
              {step.label}
            </StyledStepLabel>
            <StepContent></StepContent>
          </Step>
        ))}
      </Stepper>
    </Box>
  );
}

I'm having a problem, I custumized the stepper's font color, and in the first render, it works just fine, but when I reload the page it stops working, and just work again when I set a new color, but when I reload the page again, the same happens, how can I fix it? and if it can not be fixed, is there another good library that I can create a vertical stepper customizable? The codesandbox example is here