How we can create a react component to bundle and use this bundle in Html

<div id="wid_1714206567697"></div>
<script>
sc = document.createElement("script");
sc.setAttribute("defer",true);
sc.setAttribute("src","https://dbwx2z9xa7qt9.cloudfront.net/bundle.js?cachebust=1714206567697");
sc.setAttribute("theme","false");
sc.setAttribute("footer", "true"); 
sc.setAttribute("widget-type","carousel");
sc.setAttribute("token","64d4f7194a6399b5180ad917");
sc.setAttribute('apiurl', "https://server.onlinereviews.tech/api/v0.0.9");
sc.setAttribute('stats',"true");
sc.setAttribute('addReview',"true");
sc.setAttribute('profile-pic',"true");
sc.setAttribute('review-name',"true");
sc.setAttribute('wl', "true");
sc.setAttribute('wlndig', "");
sc.setAttribute('lang', "us");
sc.setAttribute('brandStyle', "%7B%22sidebar_background%22%3A%22%23dee5ec%22%2C%22sidebar_text%22%3A%22%230d0c0c%22%2C%22brand_button_text_color%22%3A%22white%22%2C%22brand_main_color%22%3A%22%23000000%22%2C%22brand_button_border_radius%22%3A%2220px%22%2C%22brand_sidebar_text_color_opacity%22%3A%22%230d0c0c1a%22%2C%22brand_button_hover%22%3A%22rgb(0%2C%200%2C%200)%22%2C%22brand_button_active%22%3A%22rgb(0%2C%200%2C%200)%22%2C%22brand_main_color_opacity%22%3A%22%230000001a%22%2C%22brand_font%22%3A%22Poppins%22%2C%22star_color%22%3A%22%23128c7e%22%2C%22brand_main_background%22%3A%22%23F6F8F7%22%2C%22brand_card_background%22%3A%22white%22%2C%22poweredByLink%22%3A%22https%3A%2F%2Fsimplycollectreviews.com%22%2C%22poweredicon%22%3A%22https%3A%2F%2Frecensioni-io-static-folder.s3.eu-central-1.amazonaws.com%2Fpublic_onlinereviews%2Fapp.simplycollectreviews.com%2Ftopbar.png%22%7D");
document.getElementById("wid_1714206567697").appendChild(sc);
</script>

when use use this code in html then it show me UI, it is created in reactjs component, how to bundle and create in reactjs