SolidJS: For in child component not rendering list

Question

I have a parent component returning:

<List list={list()}>
    {(item, index) => <div>{item}</div>}
</List>

where list is a created signal. List is a custom component I made returning:

<div>
    <For each={list}>{children}</For>
</div>

but whenever list is updated, it isn't rendered. When I move the For code to the parent, it renders, so what is it about passing a signal's value to a child component that makes it not rerender on updates?

EDIT: demo

import { render } from "solid-js/web";
import { createSignal, For } from "solid-js";

function Counter() {
  const [list, setList] = createSignal([]);
  const increment = () => setList([...list(), 1]);

  return (
    <>
      <button type="button" onClick={increment}>
        add
      </button>
      <p>broken list</p>
      <List list={list()} />

      <p>other list</p>
      <For each={list()}>
        {(item) => <p>{item}</p>}
      </For>
    </>
  );
}

function List({list}) {
  return (
    <For each={list}>
      {(item) => <p>{item}</p>}
    </For>
  );
}

render(() => <Counter />, document.getElementById("app"));

EDIT 2: I meant to use <List list={list()} />, which also doesn't work, but I missed it earlier.