WooCommerce Theme Integration Issue: “Content” Shows Up Twice

I have tried to integrate my custom theme with WooCommerce, however, I noticed that the theme wrapper start and theme wrapper end show up twice in the DOM. Here’s my snippet (taken from WooCommerce documentation):

    // Declare WooCommerce Support
    add_action( 'after_setup_theme', 'woocommerce_support' );
    function woocommerce_support() {
        add_theme_support( 'woocommerce' );
    }
    
    
    remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
    remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
    
    add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
    add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);
    
    function my_theme_wrapper_start() {
      echo '<div id="content">';
    }
    
    function my_theme_wrapper_end() {
      echo '</div>';
    }

<div id="content"></div> appears two times in the DOM. Am I missing something? Is there a way to set the wrapper start and end as an existing element in my DOM without duplicates?