Cannot interact with MUI stepper and change a value

Question

I want to use an MUI stepper to replace a Select component. The select component is used to indicate the status of the document the user is working in (New, In Progress, Complete, etc.). I have managed to display the correct status in the stepper, but I cannot interact with it to move the status forward or back.

This is my stepper file. I am passing the status value through props:

export default function IntakeStatusBar(props) {
    const { status } = props;
    const classes = useStyles();
    const [activeStep, setActiveStep] = useState(0);
    const steps = ["New", "In Progress", "Completed"];

    useEffect(() => {
        if (status === "In Progress") {
            setActiveStep(1);
        } else if (status === "Completed") {
            setActiveStep(2);
        } else setActiveStep(0);
    }, [status, activeStep]);

    const handleStep = (step) => () => {
        setActiveStep(step);
    };

    return (
        <div className={classes.root}>
            <Stepper activeStep={activeStep} alternativeLabel>
                {steps.map((label, index) => (
                    <Step key={label}>
                        <StepButton onClick={handleStep(index)}>{label}</StepButton>
                    </Step>
                ))}
            </Stepper>
        </div>
    );
}

This is where I call and display the stepper:

export default function IntakeDetails() {
    const [details, setDetails] = useState("");

    const onTextChange = (e) => {
        var id = e.target.id ? e?.target.id : e?.target.name;
        var value = e.target.value;
        setDetails({ ...details, [id]: value });
    }
....
    return (
        <IntakeStatusBar status={details?.Status} onChange={onTextChange} />
        // This is the Select drop down menu I have been using
        <TextField
            label="Status"
            error={requiredField && details?.Status?.length <= 0}
            value={details?.Status}
            disabled={!(adminRole && isSolutionsTab && details?.Status !== "In Plan")}
            select
            onChange={onTextChange}
        >
            {details.StatusList?.map((choice) => {
                return (
                    <MenuItem key={choice} value={choice}>
                        {choice}
                    </MenuItem>
                );
            })}
        </TextField>
    )
}

This is what the status field looks like in JSON:

{
    Status: "New"
}

Answer 1

besides changing this:

<StepButton onClick={() => handleStep(index)}>{label}</StepButton>

you have to change this:

const handleStep = (step) => {
    setActiveStep(step);
};

and set Stepper to nonLinear if you want user to click on steps:

<Stepper nonLinear activeStep={activeStep} alternativeLabel>

I also commented out useEffect since I had no idea what its purpose is and it's messing with activeStep state.