How to do nested <For

  const [grid, setGrid] = createSignal([
    [1, 1, 1, 1, 1, 1, 1, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 0, 0, 0, 0, 1],
    [1, 0, 0, 3, 0, 0, 0, 1],
    [1, 0, 0, 4, 0, 0, 0, 1],
    [1, 1, 1, 1, 1, 1, 1, 1],
  ])

  return (
    <main class="Main">
      <div class="boxWrapper">
        <For each={grid()}>
          {(row, i) => (
            <For each={row}>
              <div>{row}</div>
            </For>
          )}
        </For>
      </div>
    </main>

  return (
    <main class="Main">
      <div class="boxWrapper">
        {grid().map((row) => {
          return row.map((box) => {
            return <div class="box">{box}</div>
          })
        })}
      </div>
    </main>
  )