Lightning Component Error: Uncaught Action failed (Flow Stage Indicator)

Question

Error message:

Uncaught Action failed: c:flowStages_global$controller$statusChange [component.get is not a function or its return value is not iterable] Callback failed: serviceComponent://ui.interaction.runtime.components.controllers.FlowRuntimeController/ACTION$runInterview

This is the code I used (URL: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_using_flow_stages_wrapper.htm)

Component

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
   <aura:attribute name="currentStage" type="Object"/>
   <aura:attribute name="activeStages" type="Object[]"/>
   <!-- Get flow name from the Lightning App Builder -->
   <aura:attribute name="flowName" type="String"/>

   <aura:handler name="init" value="{!this}" action="{!c.init}"/>
   <article class="slds-card">
      <lightning:progressIndicator aura:id="progressIndicator" 
         currentStep="{!v.currentStage.name}" type="path"/>
        <lightning:flow aura:id="flow" onstatuschange="{!c.statusChange}"/>
   </article>
</aura:component>

Controller

({
   init : function(component, event, helper) {
      var flow = component.find("flow");
      flow.startFlow(component.get("v.flowName"));
   },

   // When each screen loads ... 
   statusChange : function(component, event, helper) {
      // Pass $Flow.ActiveStages into the activeStages attribute
      // and $Flow.CurrentStage into the currentStage attribute
      component.set("v.currentStage", event.getParam("currentStage"));
      component.set("v.activeStages", event.getParam("activeStages"));

      var progressIndicator = component.find("progressIndicator");
      var body = [];

      for(let stage of component.get("v.activeStages")) {
         // For each stage in activeStages...
         $A.createComponent(
            "lightning:progressStep",
            {
               // Create a progress step where label is the 
               // stage label and value is the stage name
               "aura:id": "step_" + stage.name,
               "label": stage.label,
               "value": stage.name
            },
            function(newProgressStep, status, errorMessage) {
               //Add the new step to the progress array
               if (status === "SUCCESS") {
               body.push(newProgressStep);
               }
               else if (status === "INCOMPLETE") {
                  // Show offline error
                  console.log("No response from server or client is offline.")
               }
               else if (status === "ERROR") {
                  // Show error message
                  console.log("Error: " + errorMessage);
               }
            }
         );
      }
      progressIndicator.set("v.body", body);
   }
})

Design

<design:component>
   <design:attribute name="flowName" label="Flow Name"/> 
</design:component>

I have the Flow ready and set up the stage in the Flow's resources.