React hook forms - Rendering next step of form not working

Question

I have a dynamic form in my application, which consists of multiple sections, each section has a dynamic number of form items.

Reproduce example in Stackblitz: https://stackblitz.com/edit/stackblitz-starters-vzfeyf?file=src%2Fcreate-inspection%2Findex.tsx

const inspectionForm = {
  id: 1,
  name: 'Vehicle Basic Inspection Form',
  inspectionFormSections: [
    {
      id: 1,
      name: 'Tyre Checks',
      order: 0,
      inspectionFormItems: [
        {
          id: 1,
          label: 'Front Driver Side',
          itemType: 5,
          inspectionFormSectionId: 1,
          inspectionFormSectionName: 'Tyre Checks',
        }
      ],
    },
    {
      id: 2,
      name: 'Lights Checks',
      order: 1,
      inspectionFormItems: [
        {
          id: 5,
          label: 'Front low beam',
          itemType: 5,
          inspectionFormSectionId: 2,
          inspectionFormSectionName: 'Lights Checks',
        }
      ],
    },
  ],
};

Now, I want the user to be able to input these values in a Form Wizard like multi-step form. So each section would render in a new Form Step.

As I am already using React MUI, I am using the React MUI Stepper. I am also using React Context to handle the state of the form.

The issue I'm having is that in the FormSectionComponent, I have buttons to render next/previous sections(steps). but even though the data is updating in the formModel the next step is not rendering on the UI.

/**
 * A form section, which will be rendered in a separate step.
 * Each step is a different section within the form.
*/
const FormSectionComponent: React.FC = () => {
  const { formTemplate, steps, activeStep, handleNext, handleBack } =
    useCreateInspectionState();
  console.log('formTemplate', formTemplate, 'activeStep', activeStep);

  const formModel = new CreateInspectionSectionForm(
    formTemplate?.inspectionFormSections![activeStep]!
  );

  const { control } = useForm({
    defaultValues: formModel,
    mode: 'onBlur',
  });

  const { fields, append } = useFieldArray({
    control,
    name: 'inspectionItems',
    keyName: 'ui_id',
  });

  return (
    <>
      <form>
        <CardContent>
          <FormItems control={control} fields={fields} />
        </CardContent>
        <Divider sx={{ m: '0 !important' }} />
        <CardContent>
          <Grid container>
            <Grid
              item
              xs={12}
              sx={{ display: 'flex', justifyContent: 'space-between' }}
            >
              {activeStep !== 0 && (
                <Button variant="tonal" color="secondary" onClick={handleBack}>
                  Previous
                </Button>
              )}
              {activeStep !== steps.length - 1 && (
                <Button variant="contained" onClick={handleNext}>
                  Next
                </Button>
              )}
            </Grid>
          </Grid>
        </CardContent>
      </form>
    </>
  );
};

So even though I click Next / Previous it is always displaying the first step.

What am I doing wrong? and how do I get the next step to render and display on the UI.