scrollbox with For inside doesn't properly render content #260

// packages/solid/tmp.tsx
import { SyntaxStyle } from "../core/src/syntax-style"
import { render } from "./index"
import { createEffect, createMemo, createSignal, For } from "solid-js"
import type { ScrollBoxRenderable } from "../core/src/renderables"

const syntaxStyle = SyntaxStyle.fromTheme([])

const code = `

# HELLO

world

## HELLO World

\`\`\`html
<div
  class="min-h-screen bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50 relative overflow-hidden"
>
  <!-- Sakura Petals Background Animation -->
  <div class="absolute inset-0 pointer-events-none">
    <div class="sakura-petal absolute top-10 left-20 animate-pulse opacity-60">
      🌸
    </div>
    <div
      class="sakura-petal absolute top-1/2 right-20 animate-pulse opacity-45"
      style="animation-delay: 1.5s"
    >
      🌸
    </div>
    <div
      class="sakura-petal absolute bottom-40 right-1/3 animate-pulse opacity-55"
      style="animation-delay: 0.5s"
    >
      🌸
    </div>
  </div>
/div>
\`\`\`


`

function ScrollFail() {
  const [count, setCount] = createSignal(0)
  const messages = createMemo(() => Array.from({ length: count() }, (_, i) => code))

  let scroll: ScrollBoxRenderable

  createEffect(() => {
    setTimeout(() => {
      setCount(100)
      setTimeout(() => {
        scroll?.scrollTo(scroll.scrollHeight)
      }, 10)
    }, 3000)
  })

  return (
    <scrollbox ref={(r) => (scroll = r)} focused stickyScroll={true} stickyStart="bottom" flexGrow={1}>
      <For each={messages()}>
        {(code) => (
          <box marginTop={2} marginBottom={2}>
            <code drawUnstyledText={false} syntaxStyle={syntaxStyle} content={code} filetype="markdown" />
          </box>
        )}
      </For>
    </scrollbox>
  )
}

render(() => (
  <box flexDirection="column" gap={1}>
    <box flexShrink={0}>
      <text>Some visual content</text>
    </box>
    <ScrollFail />
    <box flexShrink={0}>
      <text>Some visual content</text>
    </box>
  </box>
))