Typescript Deno fresh 岛上的列表未更新

我正在创建一个基于WebSocket的聊天应用程序来try Fresh，但我正在努力将基本的消息列表呈现到页面上.以下是一些代码:

routes/chat.tsx个

export default function Chat() {
    return (
        <div>
            // ...
            <MyIsland username={username.value}></MyIsland>
        </div>
    )
}

islands/MyIsland.tsx个

export default function MyIsland(props: IslandProps) {

    const ws = useSignal<WebSocket | null>(null);
    const messageList = useSignal<Message[]>([]);

    useEffect(() => {
        if (props.username) {
            ws.value = new WebSocket("ws://localhost:5000?username=" + props.username);
            ws.value.onopen    = ()  => { console.log('Connected..') }
            ws.value.onmessage = updateMessages;
        }
    }, []);

    const updateMessages = useCallback((m: MessageEvent<string>) => {
        const data: WsData = JSON.parse(m.data);
    
        if (data.type == SocketMessageType.Text){
            const message: Message = data.value;
            messageList.value.push(message);
        }
    }, [])

    const send = useCallback((text: string) => {
        if (ws.value) {
            const data = // ...
            ws.value.send(JSON.stringify(data));
        }
    }, [ws]);

    return (
        <div>
            <Button onClick={() => send('test')}>Send</Button>
            <div>
                {messageList.value.map((m) => ( <MessageItem {...m} /> ))} // problem here
            </div>
        </div>
    )
}

我希望当列表中充满消息时，MyIsland底部的messageList.value.map会在页面上更新，但事实并非如此.我已经验证了列表是否在后台正确更新，只是html没有更新.总的来说，我对Fresh和服务器+客户端呈现的框架非常陌生，所以我怀疑我可能误解了这些岛屿的呈现方式.谢谢你的帮助！