Shortcode inside Custom HTML Field WordPress

Question

I want to add a shortcode that I've created myself using php code, inside a custom html field which contains a form, So that's what I added in my functions.php file theme :

function generate_custom_nonce() {
    echo '<script> console.log("INSIDE FUNCTION");</script>';
    ob_start();
    wp_nonce_field('contact_form_submit', 'contact_form_nonce');
    return ob_get_clean();
}

add_shortcode('custom_nonce', 'generate_custom_nonce');

and using the WP visual editor, I created a custom html field in a page, and i added this code (where I included the [shortcode-name]) :

<div class="contact-form">
    <form method="post">
        <div class="form-group">
            <section>[custom_nonce]</section>            
            <label for="first_name">First Name:</label>
            <input type="text" name="first_name" id="first_name" required>
        </div>
        <div class="form-group">
            <label for="last_name">Last Name:</label>
            <input type="text" name="last_name" id="last_name" required>
        </div>
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" required>
        </div>
        <div class="form-group">
            <label for="message">Message:</label>
            <textarea name="message" id="message" required></textarea>
        </div>
        <button type="submit" name="submit">Submit</button>
    </form>
</div>

But it's not working, I get a text [custome_nonce] on the browser, I checked the function.php, it's working perfectly, the problem is that the function generate_custom_nonce() is not called at all, what can be the reason please ? Thanks in advance !!