Why checkout step not recorded in the Google Analytics report?

I'm making an enhanched ecommerce tracking with google analytics. I'm following the existing implementation in gtag.js. I have 4 checkout steps including shipping method data, payment method data, pending payment, and also paid (purchase). I've made the codes for each step below:

1. Shipping Method

<script>
    gtag('event', 'set_checkout_option', {
        "checkout_step": 1,
        "checkout_option": "shipping method",
        "value": ""
    });
</script>

2. Payment Method

<script>
    gtag('event', 'set_checkout_option', {
        "checkout_step": 2,
        "checkout_option": "payment method",
        "value": ""
    });
</script>

3. Pending Payment

$("#order-now-action").on('click', function() {
    gtag('event', 'set_checkout_option', {
        "checkout_step": 3,
        "checkout_option": "pending",
        "id": ""
    });
})

This is the checkout funnel that I created in Ecommerce Settings.

And this is a report in the checkout behavior menu. The shipping method is recorded, but why in step 2 (payment method) to step 4 (purchase) is it not recorded?

even though, in the sales performance menu, the transaction is recorded?

for steps 1-3 is in 1 page, while the purchase (step 4) I did on the backend using a single url. Is it because it's on 1 page so it's not recorded?

I'm very confused in solving this problem but I found the right answer why my checkout step is not recorded. This happened because set_checkout_option could not be used multiple times in one page, so I replaced it with the checkout_progress event. Because as in this Measure checkout steps documentation, To measure each subsequent checkout step, send a checkout_progress. I also modified my code a bit to be like this:

1.Shipping Method

<script>
    function checkoutProgressShippingMethodGA() {
        gtag('event', 'checkout_progress', {
            "checkout_step": 1,
            "checkout_option": "Shipping Method",
            "value": ""
        });
    }
    checkoutProgressShippingMethodGA();
</script>

2.Payment Method

<script>
    function checkoutProgressPaymentMethodGA() {
        gtag('event', 'checkout_progress', {
            "checkout_step": 2,
            "checkout_option": "Payment Method",
            "value": ""
        });
    }
    checkoutProgressPaymentMethodGA();
</script>

and tadaaaa... my checkout step has been recorded (**purchase has not been recorded because I have not implemented it on the backend)