I was checking preact with htm and when try to do a simple toggle the rendering is not working properly,

My code

html

<script type="importmap">
    {
      "imports": {
        "preact": "https://esm.sh/[email protected]",
        "preact/": "https://esm.sh/[email protected]/",
        "htm/preact": "https://esm.sh/[email protected]/preact?external=preact"
      }
    }
</script>

<link href="~/styles/product-recommendation-new.css" type="text/css" rel="stylesheet" />

<div id="product-recommendation-new-flow" class="container-fluid">

</div>

<script type="module" src="~/scripts/product-recommendation.js"></script>

JavaScript

const Toggler = () => {
    const [toggle, setToggle] = useState(true);
    console.log(toggle);
    return html`<div> <h1>Count: ${toggle ? 'true' : 'false'}</h1> <button onClick=${e=>setToggle(!toggle)}>toggle</button> </div> `;
};
render(html`<${Toggler} />`, document.getElementById('product-recommendation-new-flow'));

the output i am getting on init

once I click on button