Displaying total number of steps

[nickcanarelli]

I'm having difficulties displaying the current step count with the total number of steps.

It says Step 1 of 1 for each form page when there are 3 total steps so far. It should say Step 1 of 3, Step 2 of 3, etc... Any help is appreciated.

function FormWrapper({ children, isLastStep, status, goToPreviousStep, canGoBack, actionLabel }) {
  const [stepNumber, setStepNumber] = useState(0);
  const steps = Children.toArray(children);

  const step = steps[stepNumber];
  const totalSteps = steps.length;

  return (
    <>
      <p>
        Step {stepNumber + 1} of {totalSteps}
      </p>
      {status && (
        <div>
          {status.message}
          <hr />
        </div>
      )}
      {children}
      <Row>
        <Col lg={{ span: 9, offset: 3 }} className='onboard__actions'>
          <button
            type='button'
            onClick={goToPreviousStep}
            disabled={!canGoBack}
            className='onboard_btn onboard_btn-secondary'
          >
            Previous
          </button>
          <button type='submit' className='onboard_btn onboard_btn-primary'>
            {actionLabel || (isLastStep ? 'Submit' : 'Next step')}
          </button>
        </Col>
      </Row>
    </>
  );
}