Issue with Stepper: Marking Step as "Completed" based on form, not based on active number

[kemaltf]

I am using the Stepper component from Mantine UI with React Hook Form to create a muti-step form. I want to allow the user to jump to the specific number. For example, if I want to directly go to step 3, then when step 3 is completed, it should show a checklist icon. But for steps 1 and 2, it should be a progress icon.
Questions:
How can I mark a particular step as "completed" because the documentation says "Step state, controlled by Stepper component.".
Here is the sample code.

<form>
        <Stepper active={active}>
          {/* step 1 is unfinished, the icon will in unactive*/}
          {/* step 2 is unfinished, the icon will in unactive*/}
          {/* step 3 is finished, the icon will become checklist*/}
        </Stepper>
      </form>

Thank you for your assistance and suggestions!

[atareversei]

You can use something like this:

function getColorForStep(i: number) {
  // steps is where you keep the state of your current stepped form
  // in this example we have 3 states: 1. unfinished 2. error 3. finished
  if (steps[i] === 'unfinished') return 'dimmed'
  if (steps[i] === 'error') return 'red' 
  return 'blue'
}

<Stepper.Step
  color={getColorForStep(0)}
  completedIcon={getIconForStepOne()} // this icon will be shown when your current step number is greater then this step's number
  icon={<IconFileInfo size={iconSize} />} // this icon will be shown when your current step number is lesser or equal to this step's number
>