Signals not updating in <For> tag

const [grid, updateGrid] = createSignal(new Array(10).fill([]).map(_ => new Array(10).fill(false).map(_ => Math.random() * 10 < 5)))

const flip = (x: number, y: number) => {
  let val = grid();
  val[y][x] = !val[y][x]
  updateGrid(val)
}

return (
  <table>
    <tbody>
      <For each={grid()}>{(row, y) => (
        <tr>
          <For each={row}>{(cell, x) => (
            <td
              class={`${cell ? "bg-green-500" : 'bg-red-500'} w-8 h-8 border border-separate`}
              onclick={_ => flip(x(), y())}></td>
          )}</For>
         </tr>
      )}</For>
    </tbody>
  </table>
);

const [grid, updateGrid] = createSignal(new Array(10).fill([]).map(_ => new Array(10).fill(false).map(_ => Math.random() * 10 < 5)))

const flip = (x: number, y: number) => {
  let val = grid();
  val[y][x] = !val[y][x]
  updateGrid(val)
}

return (
  <table>
    <tbody>
      <For each={grid()}>{(row, y) => (
        <tr>
          <For each={row}>{(cell, x) => (
            <td
              class={`${cell ? "bg-green-500" : 'bg-red-500'} w-8 h-8 border border-separate`}
              onclick={_ => flip(x(), y())}></td>
          )}</For>
         </tr>
      )}</For>
    </tbody>
  </table>
);