Trop d'erreurs de nouveau rendu. Utilisation de React Hooks avec un composant Stepper

J'ai un composant Stepper qui reçoit un accessoire appelé étape

export default function HorizontalLinearStepper({ step }) {
  const classes = useStyles()
  const [activeStep, setActiveStep] = React.useState(0)
  const steps = getSteps()

  return (
    <div className={classes.root}>
      <Stepper
        activeStep={step}
        connector={<ColorlibConnector />}
        alternativeLabel
      >
        {steps.map(label => (
          <Step key={label}>
            <StepLabel
              StepIconProps={{
                classes: { root: classes.stepIcon },
              }}
            >
              {label}
            </StepLabel>
          </Step>
        ))}
      </Stepper>
    </div>
  )
}

J'ai besoin de définir la propriété activeStep en fonction de mon accessoire step, quelque chose comme ceci:

if (step === 0) {
    setActiveStep(0)
  } else if (step === 1) {
    setActiveStep(0)
  } else if (step === 2) {
    setActiveStep(2)
  } else if (step === 3) {
    setActiveStep(3)
  } else if (step === 4) {
    setActiveStep(4)
  } else if (step === 5) {
    setActiveStep(4)
  }

Le code ci-dessus génère une erreur: "Trop de nouveaux rendus. React limite le nombre de rendus pour empêcher une boucle infinie."

Quelle est la meilleure façon de procéder?