WooCommerce add order status button in the front end to change status to received

We added a custom order status called received. For that we add a custom code to define that new custom order status “wc-received”. Now I want to create a button which I can display on the my account page in order that the customer can define if he received the order. If he click on that button, the order status should be changed to received.

For that I want to use this hook: “custom_order_after_order_status”

For that I use that snippet but it does not work at all. What I’m doing wrong here?

/**
 * Add a custom button to change order status to received
 */

add_action('custom_order_after_order_status', 'add_custom_order_button', 10, 1);
function add_custom_order_button($order)
{
    $order_id = $order->get_id();
    $order_status = $order->get_status();

    // Display the button only for orders with a status other than 'Completed'
    if ($order_status !== 'received') {
        echo '<button type="button" class="button mark-as-received" data-order-id="' . $order_id . '">Mark as received</button>';
    }
}

/**
 * Process the order status change on button click
 */
add_action('wp_ajax_mark_order_as_received', 'mark_order_as_received');
add_action('wp_ajax_nopriv_mark_order_as_received', 'mark_order_as_received');
function mark_order_as_received()
{
    if (isset($_POST['order_id']) && !empty($_POST['order_id'])) {
        $order_id = sanitize_text_field($_POST['order_id']);

        // Update the order status to 'received'
        $order = wc_get_order($order_id);
        $order->update_status('received');

        wp_send_json_success('Order status changed to received.');
    } else {
        wp_send_json_error('Invalid order ID.');
    }
}