I am unable to render my React component using the WooCommerce action hook. I want to display it on the frontend. The is rendering on the frontend, but the React component is not working.I tried various way, But I cant it properly. Here is the following code which way i tried this.

**index.js**  

import  domReady  from '@wordpress/dom-ready';
import { createRoot } from '@wordpress/element';

import App from './App';
import WooCheckout from './components/Checkout'; 

document.addEventListener("DOMContentLoaded", function() {
    var element = document.getElementById('test-admin');
    console.log("React target element:", element); // Debug log
    if (element) {
        ReactDOM.render(<App />, element);
    } else {
        console.error("React target element not found!");
    }
});

let checkelement = document.getElementById('react-checkout-message');
if (checkelement) {
createRoot(checkelement).render(<WooCheckout />);

} 

index.php

class woo_text_with_react{

    public function __construct() {
       
        add_action( 'admin_menu',  [$this,'react_admin_top_menu']); 
        $this->define_constant();
        add_action('woocommerce_single_product_summary', [$this,'woo_cart_page']);
    } 

    public function define_constant(){
        define('WOO_TEST_BLOG_FILE', __FILE__);
        define('WOO_TEST_PLUGIN_DIR', plugin_dir_path(__FILE__));
        define('WOO_TEST_BLOG_URL', plugins_url('', WOO_TEST_BLOG_FILE));  
    }

    public function react_admin_top_menu() {
        $capability = 'manage_options';
        $slug = 'test-react';

        add_menu_page(
            __( 'Woo React test', 'wp-react-test' ),
            __( 'Woo React test', 'wp-react-test' ),
            $capability,
            $slug,
            array($this, 'woo_body_page'), 
            'dashicons-buddicons-replies'
        );        
    }

    public function frontend_woo_enqueue_react_app() {

        $asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php' );
        wp_enqueue_script('woo-react-app',plugins_url( 'build/index.js', __FILE__ ), $asset_file['dependencies'],
            $asset_file['version'],true );

        wp_localize_script( 'woo-react-app', 'appLocalizer', [
                'apiUrl' => home_url( '/wp-json' ),
                'nonce' => wp_create_nonce( 'wp_rest' ),
        ]);
    }
    

    /* ===== cart page ========*/

    public function woo_cart_page(){
        echo '<div id="react-checkout-message"></div>';
    }
  
    

}
new woo_text_with_react();

checkout.js

import React from'react';
//import { useState } from 'react';

const Checkout = () => {
    return (
        <div style={{ padding: "10px", backgroundColor: "#f8f8f8", borderRadius: "5px", textAlign: "center" }}>
            <p style={{ color: "red", fontWeight: "bold" }}>This is your custom message on the checkout page.</p>
        </div>
    );
};

export default Checkout;