Nested server side method calling in Lightning Component

Apex Controller:

public class SampleAuraController {
    
    @AuraEnabled
    public static String firstAction() {
        return 'First Action';
    }
    
    @AuraEnabled
    public static String secondAction() {
        return 'Second Action';
    }
}

Lightning Component:

<!--Sample.cmp--> 
<aura:component controller="SampleAuraController" implements="flexipage:availableForAllPageTypes" access="global">
    <div class="slds-m-around_xx-large">
        <lightning:button variant="brand" label="Click" onclick="{!c.handleAction}" />
    </div>
</aura:component>

Lightning Component JS Controller:

({
    handleAction : function(component, event, helper) {
        var action1 = component.get("c.firstAction");
        action1.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var result1  = response.getReturnValue();
                alert(result1);
                var action2 = component.get("c.secondAction");
                action2.setCallback(this, function(response){
                    var state = response.getState();
                    if (state === "SUCCESS") {
                        var result2  = response.getReturnValue();
                        alert(result2);
                    }
                });
                $A.enqueueAction(action2);
            }
        });
        $A.enqueueAction(action1);
    }
})