Signal value not updating from inside of `for await of` loop inside of an IIFE

// routes/connect.tsx
import type { FunctionComponent } from 'preact'
import type { PageProps } from '$fresh/server.ts'

const api_version = 10

export default ((props) => {
  const message = useSignal('Connecting')

  ;(async () => {
    const wss = new WebSocketStream(`${
        (await (
          await fetch(`https://discord.com/api/v${api_version}/gateway`)
        ).json()).url
      }/?v=${api_version}&encoding=json`)
    const { readable } = await wss.opened

    for await (const msg of readable) {
      message.value = msg // not updating message.value

      console.log(msg) // this works
    }
  })()

  message.value = 'updated outside of the IIFE' // this works too

  return (
    <div class='max-w-screen-md mx-auto flex flex-col items-center justify-center'>
      <div class='flex gap-8 py-6'>
        <button>{message}</button>
      </div>
    </div>
  )
}) satisfies <FunctionComponent<PageProps>>