How can I use react in shopify theme extension of current Version

[Ken38]

Hello Shopify Community,

I hope this message finds you well. I am currently working on creating a custom theme extension for my store. I am experiencing an issue where the extension displays correctly in the app block of the default theme code, but it does not appear in the content, specifically when using React.

Here are the details of the issue:

Problem Description:

• The custom theme extension is visible in the app block of the default theme code.
• However, it does not render the content, especially when using React.

Expected Behavior:

• The custom theme extension should display seamlessly in the content, including when React is utilized.

Additional Information:

• The extension is built using React and liquid.

Relevant Code:

theme.jsx

theme.jsx file
import 'vite/modulepreload-polyfill'
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from '@/components/App'
import './theme.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App home={home} />
  </React.StrictMode>
)

App.jsx

App.jsx file
export default function App({ home_ }) {
  console.log('Home', home_)

  return (
    <div
    >
      Hello From React!
    </div>
  )
}

counter.liquid

counter.liquid file
<div id="root">
  {% liquid
    # Relative to entrypointsDir
    render 'vite-tag' with 'theme.css'
    render 'vite-tag' with 'theme.jsx'
  %}
</div>

<script>
  const home = {{ request.path | json }}
</script>

{% schema %}
{
  "name": "Sample React Extension",
  "target": "section",
  "settings": [

  ]
}
{% endschema %}

Thank you for your time and support.

Best regards,