Front end wp_editor not saving in visual mode only working in text mode

Question

I added wp_editor custom field in woocommerce, all working except wp_editor not saving any value in visual editor mode. but only able to save value in text mode.

Also when using text mode, all html code will gone.

Any idea on how to fix this?

// Add a new checkout field

function kia_filter_checkout_fields($fields){
    $fields['extra_fields'] = array(
        'descreportfield' => array(),
        'descanotherfield' => array(
            'type' => 'select',
            'options' => array( 'a' => __( 'apple' ), 'b' => __( 'bacon' ), 'c' => __( 'chocolate' ) ),
            'required'      => true,
            'label' => __( 'Another field' )
        )
    );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'kia_filter_checkout_fields' );

// display the extra field on the checkout form
function kia_extra_checkout_fields(){ 
    $settings =   array(
        'wpautop' => true, // use wpautop?
        'media_buttons' => true, // show insert/upload button(s)
        'textarea_name' => 'descreportfield', // set the textarea name to something different, square brackets [] can be used here
        'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
        'tabindex' => '',
        'editor_css' => '', // intended for extra styles for both visual and HTML editors buttons, needs to include the <style> tags, can use "scoped".
        'editor_class' => '', // add extra class(es) to the editor textarea
        'teeny' => false, // output the minimal editor config used in Press This
        'dfw' => false, // replace the default fullscreen with DFW (supported on the front-end in WordPress 3.4)
        'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
        'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
    );
    //$allowed_tags = wp_kses_allowed_html('post');
    $checkout = WC()->checkout(); ?>

<div class="extra-fields">
    <h3><?php _e( 'Additional Fields' ); ?></h3>
        <?php
    wp_editor('', 'descreportfield', $settings);
    woocommerce_form_field( 'descanotherfield', array(
            'type' => 'select',
            'options' => array( 'a' => __( 'apple' ), 'b' => __( 'bacon' ), 'c' => __( 'chocolate' ) ),
            'required'      => true,
            'label' => __( 'Another field' )
        ), $checkout->get_value( 'descanotherfield' ) );
    ?>
    </div>

<?php }
add_action( 'woocommerce_checkout_after_customer_details' ,'kia_extra_checkout_fields' );


function kia_save_extra_checkout_fields( $order, $data ){
    // don't forget appropriate sanitization if you are using a different field type
    if( isset( $data['descreportfield'] ) ) {
        $order->update_meta_data( '_descreportfield',$data['descreportfield']);
    }
    if( isset( $data['descanotherfield'] ) && in_array( $data['descanotherfield'], array( 'a', 'b', 'c' ) ) ) {
        $order->update_meta_data( '_descanotherfield', $data['descanotherfield'] );
    } 
}
add_action( 'woocommerce_checkout_create_order', 'kia_save_extra_checkout_fields', 10, 2 );

// display the extra data on order received page and my-account order review
function kia_display_order_data( $order_id ){  
    $order = wc_get_order( $order_id ); ?>
    <h2><?php _e( 'Additional Info' ); ?></h2>
    <table class="shop_table shop_table_responsive additional_info">
        <tbody>
            <tr>
                <th><?php _e( 'Some Field:' ); ?></th>
                <td><?php echo $order->get_meta( '_descreportfield' ); ?></td>
            </tr>
            <tr>
                <th><?php _e( 'Another Field:' ); ?></th>
                <td><?php echo $order->get_meta( '_descanotherfield' ); ?></td>
            </tr>
        </tbody>
    </table>
<?php }
add_action( 'woocommerce_thankyou', 'kia_display_order_data', 20 );
add_action( 'woocommerce_view_order', 'kia_display_order_data', 20 );

this code i edit based on https://www.kathyisawesome.com/woocommerce-customize-checkout-fields/