How to solve ts(2322) error on "each" attribute of "For" component

Type '(() => Promise<any>) | undefined' is not assignable to type 'false | readonly any[] | null | undefined'.
  Type '() => Promise<any>' is not assignable to type 'false | readonly any[] | null | undefined'.ts(2322)
flow.d.ts(17, 5): The expected type comes from property 'each' which is declared here on type 'IntrinsicAttributes & { each: false | readonly any[] | null | undefined; fallback?: Element; children: (item: any, index: Accessor<number>) => Element; }'

import { For, Show, createResource } from "solid-js";
import Card from "../components/Card";

const fetchProducts = async () => {
  const res = await fetch('http://localhost:4000/products');
  return res.json;
}

export default function Home() {
  const [products] = createResource(fetchProducts);
  return(    
    <Show when={products()} fallback={<p>Loading</p>}>                  <div class='grid grid-cols-4 gap-10 my-4'>
        <For each={products()}>
          {(product) => (
            <Card rounded={true} flat={true}></Card>
          )}
        </For>
      </div>
    </Show>
    // <p>{console.log(products(), products.loading)}</p>
  );
}