How to use Async Server Component with honojs?

Question

const app = new Hono()
const AsyncCommponent = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return <h1>Hello from async</h1>;
}
app.get('/', (c) => {
  const messages = ['Good Morning', 'Good Evening', 'Good Night']
  return c.html(<div>
     <AsyncCommponent />
 </div>)
})

It doesn't work. Got an error from ts:

'Promise<HtmlEscapedString>' is not an assignable to type string. 

When run it, got runtime error:

TypeError: str.search is not a function

How can I enable it like in next.js? https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md

---

jsx tsconfig is:

"jsx": "react-jsx",
"jsxFragmentFactory": "Fragment",
"jsxImportSource": "hono/jsx"

Typescript version is: 5.2.2

Honojs version: 3.7.5