ReadableStream passed to an island component argument becomes an empty object

<Gateway readable={readable} message={message} />

export const Gateway: FunctionComponent<{
  reader: ReturnType<Awaited<WebSocketStream['opened']>['readable']['getReader']>
  message: Signal<string>
}> = ({ reader, message }) => {
  // ...
}

<Gateway reader={readable.getReader()} message={message} />

export const Gateway: FunctionComponent<{
  readable: ReadableStream
  message: Signal<string>
}> = ({ readable, message }) => {
  const reader = readable.getReader();
  // ...
}

export const Gateway: FunctionComponent<{
  wss: WebSocketStream;
  message: Signal<string>;
}> = ({ wss, message }) => {
  // ...
}

export const Gateway: FunctionComponent<{
  wss: WebSocketStream;
  message: Signal<string>;
}> = ({ wss, message }) => {
  // ...
}

// islands/Gateway.tsx

/// <reference lib='deno.unstable' />

import type { FunctionComponent } from 'preact'
import type { Signal } from '@preact/signals'

export const Gateway: FunctionComponent<{
  conn: Promise<{
    readable: ReadableStream<string | Uint8Array>
    writable: WritableStream<string | Uint8Array>
    extensions: string
    protocol: string
  }>
  message: Signal<string>
}> = ({ conn, message }) => {
  console.log(conn) // gets logged in vs code console as expected but gets logged as an empty object in the browser console

  conn.then(({ readable }) => { // error, only shown in browser console, Uncaught TypeError: Cannot read properties of undefined (reading 'then')
    readable.getReader().read().then((msg) => {
      message.value = msg.value as string
      console.log('message recieved')
    })
  })

  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>
  )
}